javascript - 难以理解闭包细节 - for 循环中的 setTimeout

Question

我无法理解为什么下面的第一个代码片段执行所有五个 console.log很快，而第二个片段执行 console.log相隔一秒。

我知道需要一个闭包(又名函数+声明它的范围)来“关闭” i 的值在for中的各个点循环。

据我所知，在第一个代码片段中，最里面的函数会立即调用，而第二个代码片段的最里面的函数不会立即调用。

然而，我并不清楚到底发生了什么。

一些问题:

• 在第一个代码片段中，最里面的函数是否在单独的刻度上执行？
• 在第一个代码片段中，为什么最里面的函数执行得这么快？
• 在第二个代码片段中，为什么最里面的函数执行时间间隔为一秒？

for (var i = 1; i <= 5; i++) {
  setTimeout(
    (function (x) {
      (function () {
        console.log(x)
      })(i)
    })(i),
    i * 1000
  )
}

for (var i = 1; i <= 5; i++) {
  setTimeout(
    (function (x) {
      return (function () {
        console.log(x)
      })
    })(i),
    i * 1000
  )
}

注意:我确实明白使用 let使这变得更容易，但我试图从闭包的 Angular 来理解这一点。

for (let i = 1; i <= 5; i++) {
  setTimeout(
    function () {
      console.log(i)
    },
    i * 1000
  )
}

Answer 1

这与闭包机制无关。这 100% 是由函数的工作方式引起的。

现在，让我们来区分一下这两个不同的函数。为了清楚起见，我将完全删除 for 循环:

1:

var i = 1; // We simply hardcode `i` for this demo.

function a (x) {
    (function(){
      console.log(x);
    })(i); // immediately call this function

    // THIS IS THE MOST IMPORTANT PART OF THE CODE
    // Yes, this space with no code at all at the end of
    // this function is the MOST IMPORTANT part of the code.
    // This absence of code represents "return undefined".
    // All functions that return nothing returns undefined.
}

setTimeout(a(i),i * 1000);

注意:记住a()返回undefined。所以setTimeout实际上是:

setTimeout(undefined,1000);

“有帮助”，如果您将 undefined 传递给 setTimeout 它会优雅地接受它并且不会生成任何错误。

很明显，您在调用 a() 时直接调用 console.log。

现在让我们看看其他代码:

2:

var i = 1;

function b (x) {
  return (function () {
    console.log(x)
  }) // <--- note you are not calling the inner function at all
}

setTimeout(b(i), i * 1000);

请注意，由于 b() 返回一个函数 setTimeout 将调用 b() 返回的函数(调用 console.log 的函数)。日志)1秒后。