揭秘异步怪兽：for (var i=1; i<=5; i++) 与 setTimeout 的巧妙配合

2023-09-30 01:35:07

时间悖论：揭开 setTimeout 和 for 循环的异步之谜

在计算机的世界里，时间并不是一个绝对的概念，尤其是在处理异步操作时。setTimeout 函数 就是异步领域的典型代表，它会在指定时间后执行某个函数。不过，当 setTimeout 与 for 循环携手合作时，异步的陷阱就会悄然而至。

异步怪兽的本质

setTimeout 是一个异步函数，这意味着它并不会阻碍当前执行代码的进程。当 setTimeout 被调用时，它会向浏览器的事件队列 注册一个函数。随后，浏览器会继续处理其他任务，直至事件队列中再无其他任务等待处理。此时，事件队列中的函数才会被依次执行。

for 循环的困境

for 循环则是一个同步操作 ，这意味着它会阻塞当前执行代码的运行。因此，当 for 循环和 setTimeout 共同出现时，问题就产生了。

让我们深入剖析一下代码：

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

在这个代码中，for 循环会立即执行，逐次将 i 的值从 1 递增至 5，并在每次迭代中调用 setTimeout 函数。setTimeout 会将一个函数注册到事件队列中，该函数会在 i * 1000 毫秒后执行。

问题的关键在于，当 for 循环执行完毕时，i 的值为 6。因此，当 setTimeout 注册的函数依次执行时，i 的值不再是我们期望的 1、2、3、4、5，而是 5 个 6。

破解异步怪兽

为了驯服这个异步怪兽，我们需要借助闭包的力量。闭包是一个函数，它可以访问其创建范围内的变量，即使该函数已执行完毕。

我们可以通过闭包将 setTimeout 注册的函数包裹起来，代码如下：

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

在这段代码中，我们使用了一个立即执行函数表达式（IIFE） 来创建闭包。IIFE 会立即执行，并将 i 的值作为参数传递给闭包函数。当 setTimeout 注册的函数执行时，它会访问闭包中保存的 i 的值，从而正确地输出 1、2、3、4、5。

结论

for 循环与 setTimeout 的巧妙配合离不开对异步操作本质的深刻理解。通过使用闭包，我们可以驯服异步怪兽，确保代码按照预期执行。掌握异步编程是成为一名优秀开发人员的关键技能，而理解 setTimeout 的怪异行为正是朝着这个方向迈出的重要一步。

常见问题解答

异步编程是一种编程范式，它允许函数在不阻塞主线程的情况下执行。当函数执行完毕时，它会将结果或错误传递回回调函数。

闭包可以访问其创建范围内的变量，即使该函数已执行完毕。因此，我们可以将 setTimeout 注册的函数包裹在闭包中，以便它可以在函数执行后仍能访问 i 的值。

是的，还有其他方法，例如使用回调函数或 Promise。不过，闭包是最简单、最直接的方法。

因为 var 关键字会将变量提升到全局作用域，这会导致 for 循环执行完毕后 i 的值仍然是 6。为了避免这种情况，我们应该使用 let 或 const 关键字来声明 i，这样 i 的作用域仅限于 for 循环。

在实际项目中，使用 for 循环和 setTimeout 的常见场景包括：

探索Web开发资源和人工智能教程的代码社区

扫码关注微信公众号