javascript - About setTimeout execution time issue

Question

A

    for (var i=5; i>=1; i--) { 
          setTimeout( function timer() {
              document.write(i+"<br />");
          }, i*3000 );
    }
    // 0 0 0 0 0
    // 保存执行后，3秒后弹出第一个console（0），之后隔3秒弹出第二个，依次按照时间执行。

A2

    for (var i=1; i<6; i++) { 
          setTimeout( function timer() {
                console.log(i);
          }, i*3000 );
    }
    // 6 6 6 6 6
    // 保存执行后，3秒后弹出第一个console(6)，之后每隔3秒弹出一个，依次按照时间执行。

B

    for (var i=5; i>=1; i--) { 
          setTimeout( function timer() {
              document.write(i+"<br />");
          }, 3000 );
    }
    // 0 0 0 0 0 
    // 保存执行后，3秒后所有的console一齐弹出
    

C (using closure)

    for (var i=5; i>0; i--) { 
          !function (num) {
              setTimeout( function timer() {
                console.log(num);
              }, i*3000 );
          }(i)
    }
   // 1 2 3 4 5 每隔3秒依次弹出

question:

1. What are the values ​​of i*3000 and i in the time settings in A and A2? (1?), why is the time still 3000 and not calculated together with the i value? Including after using closure (C), it still pops up every 3000ms.

2. What is the difference between A and B? i*3000 and 3000, the difference between console pop-up, This difference is also reflected in the C closure. Why is there such a difference?

I have seen the queue execution structure of JS before, and I know that functions such as setTimeout must wait for other codes to be executed before starting execution. If there are multiple setTimeouts, the priority will be assigned according to the length of the time setting (the setting time is shorter) forward). I really don’t know why there is such a difference, and I still can’t figure it out - -

for (var i=1;i<6;i++) { 
      !function (num) {
          setTimeout( function timer() {
            console.log(num);
          }, num*3000 );
      }(i)
}

Still pops up a console every 3 seconds. If num* is removed, it will pop up all at once. Isn't the multiplication operation performed?

Answer 1

If

1. setTimeout pops up every 3000ms, shouldn’t the time be 3000, 6000, 9000, 12000? Are you confused with setInterval?
   Then let’s talk about setTimeout(fn, time). This is the execution of a function. The creation of setTimeout is synchronous with the main js (the value of time has been determined at this time), and the asynchronous one is the execution of fn (when executing Then look for the internal i or num to absorb the effects of closures, etc.).

2. If you search event loop js on the site, there should be many repeated questions and explanations.

Answer 2

The delay of

setTimeout is relative to the moment you run it. Your for loop sets all the delays in one go. The first one is 3 seconds relative to the current time, the second one is 6 seconds relative to the current time, and the second one is 6 seconds relative to the current time. Three is 9 seconds...and so on. In the end, isn't it reflected in an output every 3 seconds...