Where does a browser event's timeStamp come from in Javascript? -
event objects passed event handler callbacks contain event.timestamp of when event occurred, timestamp produced? bubbles underlying os, or generated browser?
i'm interested in gauging reliability of timestamp , recognise later timestamp produced less accurate it's be.
also, way in timestamp produced vary between platforms , browser implementations?
thanks.
according dom4 specification ยง4.2, it's assigned when event created (you have scroll down bit):
the
timestamp
attribute must return value initialized to. when event created attribute must initialized number of milliseconds have passed since 00:00:00 utc on 1 january 1970, ignoring leap seconds.
which leads question of: when event created? can think of 3 times might done:
when os notifies browser
when javascript main ui thread next able anything
when javascript main ui thread dispatch task related event
using snippet below, @ least click
event, seems vary browser:
chrome seems assign
timestamp
when javascript main ui thread ready handle event (#3 above); can after event happened, if main javascript ui thread has had chance other things in interim. (for me, surprising.)firefox seems assign
timestamp
when event occurs (#1 above), regardless of main javascript ui thread doing. have expected.ie seems chrome (#3), can't rule out possibility assign timestamp third click when second click processed (#2), because can't recognize click on third button when things busy.
// sadly, firefox has bug (https://bugzilla.mozilla.org/show_bug.cgi?id=77992) // timestamp not epoch, it's system start. work relative // moment clicked first button rather working nice clean absolute data. // sadly, ie11 doesn't clicking second button , moving on // click third, data clicking second suggests it's more // chrome firefox. var start1; var start2; document.getelementbyid("start").addeventlistener("click", function(e) { // remember event's timestamp start1 = e.timestamp; start2 = 0; // start busy-loop 3 seconds, locking main js thread busy(3000); display("done first busy loop"); }, false); document.getelementbyid("then1").addeventlistener("click", function(e) { // show time since first event showelapsed(e.timestamp); // remember event's timetsamp start2 = e.timestamp; // busy-loop, second time busy(1000); display("done second busy loop"); }, false); document.getelementbyid("then2").addeventlistener("click", function(e) { // show time since first , second events showelapsed(e.timestamp); }, false); function showelapsed(ts) { display("elapsed first event: " + (ts - start1) + "ms"); if (start2) { display("elapsed second event: " + (ts - start2) + "ms"); } } function busy(duration) { var target = date.now() + duration; while (date.now () < target) { // wait } } function display(msg) { var p = document.createelement('p'); p.innerhtml = msg; document.body.appendchild(p); } function format(ts) { return new date(ts).toisostring().substring(11, 23); }
<input type="button" id="start" value="click me"> <input type="button" id="then1" value="then me afterward"> <input type="button" id="then2" value="then me after (not on ie!)">
Comments
Post a Comment