图例剖析 setTimeout 与循环闭包的经典面试题

在 JavaScript 开发中，setTimeout 与循环闭包相关的问题常常出现在面试场景中，理解它们对于开发者来说至关重要。

让我们来看一个简单的循环示例：

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

在这个例子中，我们期望每隔 1 秒依次输出 0 到 4 。然而，实际的输出结果却是 5 个 5 。这是因为 var 声明的变量作用域是函数级别的，在循环结束后，i 的值已经变成了 5 。

为了解决这个问题，我们可以使用 let 来声明变量。

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

因为 let 声明的变量具有块级作用域，每次循环都会创建一个新的变量 i ，从而得到我们期望的输出结果。

再来看一个更复杂的例子：

function closureExample() {
  var arr = [];
  for (var i = 0; i < 5; i++) {
    arr.push(function() {
      console.log(i);
    });
  }
  return arr;
}

var funcs = closureExample();
for (var j = 0; j < funcs.length; j++) {
  funcs[j]();
}

这里，当我们执行返回的函数时，输出的依然是 5 。这是因为在函数 closureExample 中创建的匿名函数形成了闭包，它们都引用了外部函数中的变量 i ，而循环结束后 i 的值为 5 。

解决方法是将循环中的函数修改为立即执行函数表达式：

function closureExample() {
  var arr = [];
  for (var i = 0; i < 5; i++) {
    (function(j) {
      arr.push(function() {
        console.log(j);
      });
    })(i);
  }
  return arr;
}

通过这种方式，每个函数都能捕获到当前循环中 i 的值，从而实现正确的输出。

理解 setTimeout 和循环闭包的工作原理对于写出正确、高效的 JavaScript 代码至关重要。在面试中，能够清晰地解释这些概念和解决相关问题，将展示出您扎实的 JavaScript 基础知识和解决复杂问题的能力。