Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why does using Date.now() in condition create an infinite loop?

I wanted to create a loop that could simulate a 5 second delay but ended up creating an infinite loop. I don’t get why that works this way.

let a = Date.now() + 5000;
while(Date.now() < a) {
    console.log(1);
}

What is wrong? a is a fixed value and isn’t Date.now() supposed to get changed after every iteration?

I’m also wondering why setTimeout still works when the loop is infnite? Isn’t it supposed to get executed only after the currently executing script is complete? Since this script is never complete why does setTimeout still get invoked?

setTimeout(() => {
    alert(2);
}, 2000);
let a = Date.now() + 5000;
while( Date.now() < a ) {
    console.log(1)
}
Tags:

2

Answers


  1. 0

    I wanted to test the comments you’re getting saying it’s a ‘console.log’ problem – that the problem you’re experiencing is because your pc is struggling to process all those log calls. I commented it out, and console.logged only after the loop finishes:

    let a = Date.now() + 5000;
while(Date.now() < a) {
    // console.log(1);
}

console.log('done');

    It seems to work just fine, logs ‘done’ after 5 seconds.

    Edit. After prompting from Pointy, I’ve accepted that it’s probably a good idea to put a disclaimer here: nobody should be implementing this kind of loop as a way to wait for something.

    Login or Signup to reply.
  2. 0

    Actually your code is not creating infinite loop. It will keep printing 1 until 5 seconds over. I tested it locally. But print is pretty fast, it looks like infinite loop. Scroll down and see at the end printing will be stopped. You can try same code by giving just 500 ms.

    let a = Date.now() + 500;
while(Date.now() < a) {
    console.log(1);
}

    Now come to another question to understand why setTimeout worked, you have to understand internal working of Javascript. I will recommend this video How JavaScript Works 🔥& Execution Context

    In JS, all functions which will execute are pushed to call stack for executed. In this case console.log method in while loop.

    JS engine also has a callback queue which have callback functions ready to be executed and there is event loop which always checks if call stack is empty. If yes, it will take the callback function from the queue and push to the call stack for execution.
    Here setTimeout function has a callback, once timer will expire this callback will be pushed to a callback queue.

    Your while loop is just pushing console.log for execution one after another and it’s getting executed in no time.
    But as soon as there is a callback present in the callback queue and call stack is empty for a moment, event loop just push the callback for execution. And it will continue till all callbacks in the queue will be executed.
    So callbacks have higher priority when it comes to execution.
    You can try example with multiple setTimeout as well.

    Hope this will help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search