文章目录
情景
今天在复习JS的闭包相关的知识时,看到有一篇文章中讲到了
setTimeout/setInterval
的闭包,不禁勾起我之前对这个问题的一系列想法,下面针对这个问题进行详细的讲解。以setTimeout
为列,示列代码如下:
for(var i = 0; i < 4 ; i++){
setTimeout(function(){
console.log(i)
}, i * 1000);
}
一般情况下,你可能会认为这段代码会依次输出如下内容
0, 1, 2, 3
然而事实是,会每隔一秒输出如下内容(请自行将逗号脑补为换行)
4, 4, 4, 4
要理解程序为什么会有这样的输出,我觉得有两个重要的概念必须理解,这两个重要的概念就是JS的事件机制和闭包
下面我分开讲讲这两个概念。
事件机制
对于这个事件机制,我在本文就进行大概的讲解,具体的讲解后面会出专门的博客来进行讲解。
1. 单线程
首先JS是单线程的单线程的,也就是一个时刻只会有一个进行运行,而运行的进程是来自一个类似运行栈
中的任务。
2. 任务类型
JS的任务分为同步任务和异步任务
3. 任务执行流程
在进行JS代码解析时,同步任务的代码会根据程序的先后顺序进入运行栈
, 异步任务则会在适当的时候进入异步任务队列
, 当运行栈
中的任务运行完了之后,就会去异步任务队列
中获取任务放入运行栈
执行。为什么说异步任务会在适当的时候进入异步任务队列
呢,取个列子,当我们使用setTimeout
和setInterval
时,当程序解析到这两个特殊函数时,并不是直接将相应的任务(可以理解为回调函数代码)放入到异步任务队列中,而是在相应的时间之后,将异步任务放入到异步任务队列中。
所以,前文循环中的setTimeou
t我们可以理解会4个不同的异步任务,每个任务的主体内容都是一样的,都是回调函数。而setTimeout
外面的for
循环,属于同步任务,在其执行完以后,才会执行我们的setTimeout
的回调函数。下面我们再看看setTimeout
的回调函数。
闭包
当然,闭包这么高深的东西本篇博文也是不打算详细讲解的,后续还是会单独对这个高深的概率进行详细探讨的。这里只是针对上文的代码进行简单的讲解。
1. 闭包的定义
首先,闭包最简单的理解就是在函数中定义函数,同时在定义的函数内部调用了函数外部的变量时,便形成了闭包。
我们仔细看看代码
for(var i = 0; i < 4 ; i++){
setTimeout(function(){
console.log(i)
}, i * 1000);
}
2. 实列中的闭包
我们可以看到在回调函数中,调用了for
循环中变量i
,而这个变量i并不是匿名回调函数的变量。所以这个匿名函数实际上就形成了一个闭包,闭包中的i
依赖于外部循环中的i
,而这4个setTimeout
的回调函数都是依赖这同一个i
,就是循环结束时候的i
,所以最后的输出结果都是4。
解决方案
1. 使用es6的let
```
for(let i = 0; i < 4; i++){
setTimeout(function(){
console.log(i)
}, i*1000)
}
```
2. 使用立即执行函数
for (var i = 0 ; i <=4 ; i++) {
setTimeout( (function(res){
return function(){
console.log(res);
};
})(i) , i * 1000);
}
这种方法就是利用立即执行函数和闭包,将循环体执行中的i
最为参数传递给内部的函数,而内部的函数return
出来的结果是一个函数,这个函数调用了内部函数的变量res
, 形成了闭包,所以这个res
就会被保存下来,等待函数调用的时候执行。
3. 使用setTimeout的第三个参数
for(var i = 0 ; i < 5; i++){
setTimeout( function(t){
console.log(t)
},i * 1000, i);
}
这种方法就是利用了setTimeout
函数的第三个参数,它可以作为参数传递给回调函数。
总结
以上是个人对于这个setTimeout
循环闭包系列问题的思考,文中如有纰漏, 欢迎大家指正,一同交流学习。