Javascript response time
I am working on a very time sensitive application that uses keystrokes for user input. Since I'm talking milliseconds here, I went ahead and tried a version like this:
function start() {
//stim.style.display = "block";
rt_start = new Date().getTime();
response_allowed = 1;
}
function end() {
var t = rt_end - rt_start;
//stim.style.display = "none";
log.innerHTML = t;
i++;
if (i < iterations) {
setTimeout('start();', 1000);
}
}
var rt_start;
var rt_end;
var iterations = 100;
var i = 0;
var response_allowed = 0;
var stim;
var log;
$(document).ready(function() {
document.onkeydown = function(e) {
if (response_allowed == 1) {
rt_end = new Date().getTime();
response_allowed = 0;
end();
}
};
stim = document.getElementById('stim');
log = document.getElementById('log');
start();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="log"></div>
<img src="https://www.gravatar.com/avatar/cfefd93404e6b0eb3cde02b4b6df4e2b?s=128&d=identicon&r=PG&f=1" id="stim" />
And it works fine, usually under-5ms timers (just holding down a key). But as soon as I change the code to display the image (by uncommenting the two lines) it slows down to about 30ms.
Can someone point me in the direction of why exactly and how to avoid this additional delay?
thank
source to share
I would recommend using DOMHighResTimeStamp where available (with a polyfill for browsers that don't provide it).
This is a high resolution timestamp (intended for accurate measurement) to be used (for example) by the navigation and web performance APIs (search for this on the Mozilla Developer Network as I cannot share more than two links in one post) ...
A quick way to get DOMHighResTimeStamp is the same as you do with var ts = new Date().getTime();
to get a regular millisecond timestamp:
var ts = performance.now();
As I said above, check out the Website Performance API on MDN. This will be very useful if your application is really time sensitive.
EDIT:
As far as your snippet goes, it seems to me that if you hold down the key, you will always be limited by the resolution of the keydown event (which fires continuously, but not every milissecond). You can easily see this behavior if you press the character key down (continuously) with a text editor and check how many times a character is written per second. This, I think, is controlled by OS customization.
You are also limited by the "drift" associated with setTimeout / setInterval. You see, setTimeout queues something to execute after a certain delay, but that doesn't guarantee it will execute on time. This is a "best effort" scenario, and if the browser is busy doing something, it drifts significantly. Meaning: If you use setTimeout to re-enable a variable response_allowed
after 1 second, you can expect it to re-enable it after "about" (but not quite) 1 second.
source to share