JS For循环内部延时执行(For循环延时)
我没猜错的话,你写的 for循环延时执行 是这样写的:是不是发现出错了啊?哈哈哈 是不是觉得应该输出0,1,2,3,4,5。但是结果却是六个6 ?经过我一下午的琢磨和研究,找到原因,并且找到了解决办法。原因: js是单线程的,在执行for循环的时候,定时器被放到任务队列中等待执行,等到定时器可以执行的时候,for循环已经跑完了因此打印出六个6。解决方法:同理可以这样原理:1作用域问题 在js中,一
·
我没猜错的话,你写的 for循环延时执行 是这样写的:
for (var i = 0; i < 6; i++) {
setTimeout(function () {
console.log(i);
}, 1000)
}
是不是发现出错了啊?哈哈哈 是不是觉得应该输出0,1,2,3,4,5。但是结果却是六个6 ?
经过我一下午的琢磨和研究,找到原因,并且找到了解决办法。
原因: js是单线程的,在执行for循环的时候,定时器被放到任务队列中等待执行,等到定时器可以执行的时候,for循环已经跑完了因此打印出六个6。
解决方法:
for (var i = 0; i < 6; i++) {
(function (t, data) { // 注意这里是形参
setTimeout(function () {
console.log(`这是第 ${t} 次,这是其他参数:${data}`);
}, 1000 * t); // 还是每秒执行一次,不是累加的
})(i, '其他参数') // 注意这里是实参,这里把要用的参数传进去
}
同理可以这样
// JS中刚刚的写法还可以按照下面的方式实现
for (var i = 0; i < 6; i++) {
setTimeout(fn(i),1000);
}
function fn(a){
return function(){
console.log(a);
}
}
原理:
1作用域问题 在js中,一个{}就是一个代码块,我们在for循环中定义的i变量,全局可以使用,循环中的每一次给i赋值,都是给全局变量i赋值,每次循环都会产生一个代码块,每个代码块中的都是一个新的变量
2立即执行的匿名函数 给外部包装了一个立即执行的匿名函数,setTimeout里面的匿名函数不再引用外部函数的参数,而是直接引用外部匿名函数的参数,使得延迟函数的回调可以将新的作用域封闭在每次迭代的内部。
更多推荐
已为社区贡献1条内容
所有评论(0)