Javascript - Why does measuring time becomes inaccurate in a iterating function?

Question

Consider this piece of code

// Initialise the variables to check when the code started
let total_time = performance.now();
let recursions = 0;
function test() {
    recursions++;
    if (recursions === 60) {
        // Check how long it took to do 60 recursions
        console.log(`${performance.now() - total_time}ms`);
    }
// Timeout to call it 17ms later
setTimeout(() => test(), 17);
}
test();

This is meant to show when 60 recursions have happened to ensure that certain parts of my code are fired off correctly (without needing setTimeout as it's blocking) and I get between 1200 - 1600ms for no reason. I used a modified version that measured how long it took and it gave 0ms (for no reason). Anyone know why? And will the same happen in node.js?

Code used to measure how long it took to do one recursion

let start_time = performance.now();
let total_time = performance.now();
let measure = 0;
function test() {
    start_time = performance.now();
    measure++;
    if (measure === 60) {
        console.log(`${performance.now() - total_time}ms`);
    }
    console.log(`Taken ${performance.now() - start_time}`);
}
test();

Answer 1

It's not supposed to be very accurate as you might expect since the timeout can fire an event later when the page is busy with other tasks.

setTimeout is implemented in a way it's meant to execute after a minimum given delay, and once the browser's thread is free to execute it. so, for an example, if you specify a value of 0 for the delay parameter and you think it will execute "immediately", it won't. it will, more accurately, run in the next event cycle (which is part of the event loop - concurrency model which is responsible for executing the code).

So for conclusion, you can't use setTimeout if you expect a consistent, reliable and accurate timing in scale of millisecond.

Please read reason for delays longer then specified - https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#reasons_for_delays_longer_than_specified

More about the JS event loop - https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop