setTimeout与循环闭包

最新推荐文章于 2024-04-04 12:28:32 发布

转载最新推荐文章于 2024-04-04 12:28:32 发布 · 308 阅读

CC 4.0 BY-SA版权

原文链接：https://mp.weixin.qq.com/s?__biz=MzI4NjE3MzQzNg==&mid=2649865908&idx=1&sn=c73a6d08141e5735ff0a4ccae921b799&chksm=f3e5ef27c492663196163590c881e03eba7f5665a2297e6cdebf777bd8d75837533fd1e61282&scene=178&cur_album_id=1490435895521574914#rd

文章标签：

#javascript #开发语言 #ecmascript

本文深入探讨了JavaScript中setTimeout的使用，解释了为何在for循环中使用setTimeout会导致数字7的打印。通过分析setTimeout的工作原理，解释了闭包在解决异步执行顺序问题中的关键作用。同时，提供了多种改造代码的方法，确保数字能按预期顺序0-5依次输出。这些方法包括立即执行函数表达式和利用闭包保存变量，以及使用setTimeout的第三个参数。通过这些示例，读者可以更好地理解和掌握JavaScript的异步编程与闭包概念。

setTimeout console.log打印数字的问题：

为什么会打印数字7呢？

每一个setTimeout在执行时，会返回一个唯一ID，上图中的数字7，就是这个唯一ID。我们在使用时，常常会使用一个变量将这个唯一ID保存起来，用以传入clearTimeout，清除定时器。

setTimeout 与闭包

思考：下面的输出是什么？

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

如果我们直接这样写，根据setTimeout定义的操作在函数调用栈清空之后才会执行的特点，for循环里定义了5个setTimeout操作。而当这些操作开始执行时，for循环的i值，已经先一步变成了6。因此输出结果总为6。

思考：如何改造上面的代码让0-5顺序输出？

我们想要让输出结果依次执行，我们就必须借助闭包的特性，每次循环时，将i值保存在一个闭包中，当setTimeout中定义的操作执行时，则访问对应闭包保存的i值即可。

而我们知道在函数中闭包判定的准则，即执行时是否在内部定义的函数中访问了上层作用域的变量。我们需要包裹一层自执行函数为闭包的形成提供条件。

因此，我们只需要2个操作就可以完成题目需求，一是使用自执行函数提供闭包条件，二是传入i值并保存在闭包中。


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

当然，也可以在setTimeout的第一个参数处利用闭包。


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

还可以使用 setTimeout 的第三个参数来实现

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

setTimeout 的第三个参数会作为他内部的函数的参数传递进去。