解决循环中setTimeout执行顺序的问题


Posted in Javascript onJune 20, 2018

期望:开始输出一个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, ...)。立即执行函数会立即执行。

以上这篇解决循环中setTimeout执行顺序的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
react-native封装插件swiper的使用方法
Mar 20 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
Vue slot用法(小结)
Oct 22 Javascript
Vue.use源码学习小结
Jun 20 #Javascript
Vuex入门到上手教程
Jun 20 #Javascript
JavaScript 中的 this 工作原理
Jun 20 #Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 #Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 #Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 #Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 #Javascript
You might like
咖啡的植物学知识
2021/03/03 咖啡文化
十天学会php之第七天
2006/10/09 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php变量作用域的深入解析
2013/06/03 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
python 域名分析工具实现代码
2009/07/15 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python 12306抢火车票脚本
2018/02/07 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
python实现自动清理重复文件
2020/08/24 Python
python pip如何手动安装二进制包
2020/09/30 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
童装店创业计划书
2014/01/09 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL