function x() {
  for (let i = 1; i <= 5; i  ) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  }
  console.log("Hello World!!");
}
x();

The above function produces the output 1 to 5 but it's taking 1 second to produce each output. And that's what I am not getting... Why is it taking 1 second each and why not 1 second for first value of i, then 2 seconds for second value of i and so on and so forth as I am multiplying the milliseconds with the i value?

CodePudding user response：

The main confusion you are having is pretty common and comes from the fact that you are using a loop. Everything outside of the timer callback is JavaScript that is being executed synchronously with no delay. The loop executes 5 times immediately when you run the code and so 5 instances of the timer callback function get placed on the event queue in a matter of milliseconds and it is from that point in time that all 5 timer callbacks are delayed, rather than one callback being delayed from the completion of the prior one.

The first instance of the callback then runs after its initial delay is reached (1 second), then the second instance runs after its delay (2 seconds, which is only 1 second later than when the first function call ran) and then the third one runs (which is only 1 second behind the previous one of 2 seconds) and so on.

What you need to do is place the first instance of the callback on the event queue with a 1 second delay before it runs and then, when that first instance has completed, place another instance on the event queue with a 2 second delay, and so on.

To do this, forget the loop and make the timer function recursive, which will essentially cause a repeating code call, just as a loop would.

let delay = 1000;
let timer = null; // Will hold a reference to the timer

function x() {
    timer = setTimeout(function(){
      console.log(delay / 1000);
      delay  = 1000;
      if(delay > 5000){
        clearTimeout(timer); // Cancel the timer
        console.log("Operation Complete!");
      } else {
        // Because the next call for the parent function comes from within
        // the timer callback function, it is delayed until the end of that
        // callback function's execution.
        x();
      }
    }, delay);
}
x();

CodePudding user response：

If you want the behaviour of adding a i seconds each time, do something like:

function x(i, max = Infinity) {
  if (i > max) return

  console.log("Hello World!! %s", i);

  setTimeout(function() {
    console.log(i);
    x(i   1, max)
  }, i * 1000);
}

x(1, 5);