การประทับเวลาความละเอียดสูงสำหรับเหตุการณ์

เจฟฟ์ พอสนิก
เจฟฟ์ พอสนิก

พร็อพเพอร์ตี้ timeStamp ของอินเทอร์เฟซ Event ระบุเวลาที่เหตุการณ์หนึ่งๆ เกิดขึ้น

ใน Chrome เวอร์ชันก่อน 49 ค่า timeStamp นี้จะแสดงเป็น DOMTimeStamp ซึ่งเป็นตัวเลขจำนวนเต็มมิลลิวินาทีตั้งแต่ Epoch ของระบบ คล้ายกับค่าที่ได้จาก Date.now()

สำหรับ Chrome 49 เป็นต้นไป timeStamp จะเป็นค่า DOMHighResTimeStamp ค่านี้ยังคงเป็นจำนวนมิลลิวินาที แต่มีความละเอียดแบบไมโครวินาที ซึ่งหมายความว่าค่าดังกล่าวจะมีคอมโพเนนต์ทศนิยม นอกจากนี้ ค่าจะสัมพัทธ์กับ PerformanceTiming.navigationStart ซึ่งก็คือเวลาที่ผู้ใช้ไปยังหน้าเว็บ ไม่ใช่ค่าที่จะสัมพัทธ์กับ Epoch

ประโยชน์ของความแม่นยําของเวลาประทับเพิ่มเติมในตัวอย่างต่อไปนี้

ข้อควรพิจารณาเกี่ยวกับการทำงานข้ามเบราว์เซอร์และแบบเดิม

หากคุณมีโค้ดเดิมที่เปรียบเทียบค่า Event.timeStamp จาก 2 เหตุการณ์ คุณไม่ควรต้องปรับโค้ดเมื่อเปลี่ยนไปใช้ DOMHighResTimeStamp นอกจากนี้ ในเบราว์เซอร์ที่รองรับ DOMHighResTimeStamp โค้ดที่มีอยู่จะได้รับประโยชน์จากการมีความแม่นยำที่เพิ่มขึ้นของไมโครวินาที รวมถึงความจริงที่ว่า DOMHighResTimeStamp มีการรับประกันว่าจะเพิ่มขึ้นอย่างสม่ำเสมอ ไม่ว่านาฬิกาของระบบจะเปลี่ยนไปในระหว่างการดำเนินการของหน้าเว็บหรือไม่ก็ตาม

แต่หากแทนที่จะเปรียบเทียบค่า Event.timeStamp 2 ค่า โค้ดของคุณจําเป็นต้องระบุว่าเหตุการณ์เกิดขึ้นนานแค่ไหนแล้ว ก็สามารถเปรียบเทียบค่า DOMHighResTimeStamp ใหม่กับ performance.now() ได้โดยตรง และหากต้องการแปลง Event.timeStamp ให้เป็นจำนวนสัมบูรณ์ของมิลลิวินาทีนับตั้งแต่ Epoch ของระบบ คุณจะรับค่านั้นได้โดยการเพิ่ม DOMHighResTimeStamp ไปยัง performance.timing.navigationStart

ในทั้ง 2 กรณี DOMTimeStamp และ DOMHighResTimeStamp จะทำงานแตกต่างกัน แต่คุณลดความซับซ้อนของโค้ดข้ามเบราว์เซอร์ได้โดยใช้ฟังก์ชัน Conversion นี้ด้วยความเอื้อเฟื้อจาก Majid Valipour ออบเจ็กต์ Event เป็นพารามิเตอร์และแสดงผลค่าที่คล้ายกับ DOMHighResTimeStamp ที่พร้อมเปรียบเทียบกับ performance.now() หรือเพิ่มลงใน performance.timing.navigationStart