浅谈循环中setTimeout执行顺序问题
浅谈循环中setTimeout执行顺序问题
(下面有见解一二)
期望:开始输出一个0,然后每隔一秒依次输出1,2,3,4。
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
}
结果:输出5。
原因:setTimeout 使函数延迟1s执行,而for循环执行完成还不到0.1秒,到执行函数的时候,其实 i 已经变成5了,因此console.log(i)输出5。
解决方法一:使用let块作用域。
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
}
解决方法二:加个闭包。
for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
})(i);
结果:开始输出一个0,然后每隔一秒依次输出1,2,3,4。
失败方法:
for (var i = 0; i < 5; i++) {
(function() {
setTimeout(function() {
console.log(i);
}, 1000 * i);
})();
}
结果:输出 5。
原因:去掉函数的参数i,则函数内部没有对i保持引用。
解决方法三:
for (var i = 0; i < 5; i++) {
setTimeout((function(i) {
console.log(i);
})(i), i * 1000);
}
结果:立马输出0-4。
原因:setTimeout可以接受函数或者字符串作为参数,而给setTimeout传递了一个立即执行函数,该立即执行函数是undefined ,也就是说等价于setTimeout(undefined, ...)。立即执行函数会立即执行。
见解一:
for(var i=0;i<5;i++){
setTimeout(function(){
console.log(i);
},1000)
setTimeout是异步执行的,1000毫秒后向任务队列里添加一个任务,只有主线上的全部执行完才会执行任务队列里的任务,所以当主线程for循环执行完之后 i 的值为5,这个时候再去任务队列中执行任务,i全部为5;
每次for循环的时候setTimeout都会执行,但是里面的function则不会执行被放入任务队列,因此放了5次;for循环的5次执行完之后不到1000毫秒;
1000毫秒后全部执行任务队列中的函数,所以就是输出五个5啦
假如把var换成let,那么输出结果为0,1,2,3,4;
因为let i 的是区块变量,每个i只能存活到大括号结束,并不会把后面的for循环的 i 值赋给前面的setTimeout中的i;而var i 则是局部变量,这个 i 的生命周期不受for循环的大括号限制;
见解二:
for(var i=0;i<=3;i++){
setTimeout(function() {
console.log(i)
}, 10);
}
答案:打印4次4
这道题涉及了异步、作用域、闭包
settimeout是异步执行,10ms后往任务队列里面添加一个任务,只有主线上的全部执行完,才会执行任务队列里的任务,当主线执行完成后,i是4,所以此时再去执行任务队列里的任务时,i全部是4了。对于打印4次是:
因为for循环头部的let不仅将i绑定到for循环快中,事实上它将其重新绑定到循环体的每一次迭代中,确保上一次迭代结束的值重新被赋值。setTimeout里面的function()属于一个新的域,通过 var 定义的变量是无法传入到这个函数执行域中的,通过使用 let 来声明块变量,这时候变量就能作用于这个块,所以 function就能使用 i 这个变量了;这个匿名函数的参数作用域 和 for参数的作用域 不一样,是利用了这一点来完成的。这个匿名函数的作用域有点类似类的属性,是可以被内层方法使用的。
查了一下百度的一个答案:
setTimeout是一次执行函数,这里是10ms后执行,仅仅执行一次;for(var i=0;i<=3;i++),i的每次取值都是执行setTimeout这个函数,并没有执行setTimeout里面的function(即闭包函数),setTimeout里面的function是有setTimeout的定时触动的,也就是10ms后执行,也就是说i从0~3时,一共执行了4次的setTimeout()函数,此时的i的值是4,由于for语句的执行速度远小于1秒,所以,1秒后,由setTimeout()函数定时触动的闭包函数function()开始执行,alert(i);i的值已经是4了,所以相继打印4次i.
---------------------
原文:https://blog.csdn.net/huakaiwuxing/article/details/78968642
浅谈循环中setTimeout执行顺序问题的更多相关文章
- 浅谈Unity的脚本执行顺序
一.添加脚本的顺序 这是一张官方的脚本顺序图 一般,当我们把脚本绑定在游戏对象上时,或者点击绑定好的脚本的reset按钮时,会调用Reset() 当我们初始化一个对象时,会先调用Awake()在调用O ...
- Promise和setTimeout执行顺序 面试题
看到过下面这样一道题: (function test() { setTimeout(function() {console.log(4)}, 0); new Promise(function exec ...
- for循环中setTimeout,var与let的不同
先看下面两段代码 for (let i = 0; i < 5; i++) { setTimeout(function () { console.log(i) }, 2000) } for (va ...
- 关于async/await、promise和setTimeout执行顺序
先来一道关于async/await.promise和setTimeout的执行顺序的题目: async function async1() { console.log('async1 start'); ...
- promise 及 setTimeout 执行顺序
setTimeout(function() { console.log(1); }, 0); new Promise(function(res, rej) { res(2); console.log( ...
- 浅谈C/C++中的顺序点和副作用
一.副作用(side effect) 表达式有两种功能:每个表达式都产生一个值( value ),同时可能包含副作用( side effect ).副作用是指改变了某些变量的值. 如: 1:20 ...
- promise和setTimeout执行顺序的问题
提出问题,问题代码为 setTimeout(function(){console.log(1)},0); new Promise(function(resolve){ console.log(2) f ...
- 浅谈JS之setTimeout与setInterval
概念 setTimeout与clearTimeout,以及setInterval与clearInterval均属于Window对象方法. 方法 描述 setTimeout 在指定的毫秒数后调用函数或计 ...
- 浅谈Java变量的初始化顺序详解
规则1(无继承情况下):对于静态变量.静态初始化块.变量.初始化块.构造器,它们的初始化顺序依次是(静态变量.静态初始化块)>(变量.初始化块)>构造器证明代码: 复制代码 代码如下: p ...
随机推荐
- Kylin, Mondrian, Saiku系统的整合
本文主要介绍有赞数据团队为了满足在不同维度查看.分析重点指标的需求而搭建的OLAP分析工具.这个工具对Kylin.Mondrian以及Saiku做了一个整合,主要工作包括一些定制化的修改以及环境的配置 ...
- Linux基础命令---文本统计wc
wc 统计文件的字节数.单词数.行数. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法 wc [选项] f ...
- OAuth2.0 知多少(好)
https://www.cnblogs.com/sheng-jie/p/6564520.html 简书集成的社交登录,大大简化了我们的注册登录流程,真是一号在手上网无忧啊.这看似简单的集成,但背后的技 ...
- JustOj 1414: 潘神的排序
题目描述 老潘,袁少,小艾都是江理的大个子,他们想按身高排队,现在给你他们的身高,请你算出队伍中站在第二的有多高. 输入 输入三个整数,分别表示三个人的身高.(单位:纳米) 输出 输出身高排第二的身高 ...
- Codeforce 270A - Fancy Fence (正多边形)
Emuskald needs a fence around his farm, but he is too lazy to build it himself. So he purchased a fe ...
- Pycharm小技巧
Pycharm专业版2017.3及以上 Python2.7.x及以上 补全与高亮 在创建python2.7,django1.10的项目时,碰到html代码不补全也不高亮的问题,解决思路如下: # 依次 ...
- fjwc2019 D4T1 循环流
#187. 「2019冬令营提高组」循环流 假的网络流,其实是O(1)算法 手画n个图后,你会发现只要分成几种情况讨论讨论就得了. 当$a==1$时显然不存在. 当$a!=1$时 如果$n==2$,显 ...
- 批处理no.bat
在公司每次我启动电脑, 网络连接需要一段时间, 而我想在这段小时间里面, 一旦网络连接成功就帮我启动微信和qq, 如果还没有连接成功就继续监测直到有网络了才会成功才会打开两个程序, 当打开程序后脚本自 ...
- Codeforces 833A The Meaningless Game - 数论 - 牛顿迭代法 - 二分法
Slastyona and her loyal dog Pushok are playing a meaningless game that is indeed very interesting. T ...
- Git rebase使用
目录 rebase的优点和缺点 分支内合并多个commit为一个新commit使用: 命令: 使用: 将其他分支合并到主分支,表现为线性: 将其他分支多个commit合并到主分支,并形成一个新comm ...