解决循环中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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
javascript prototype,executing,context,closure
Dec 24 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
一文了解Vue中的nextTick
May 06 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
Python requests模块cookie实例解析
2020/04/14 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
高中军训感言1000字
2014/03/01 职场文书
村长贪污检举信
2014/04/04 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
离职证明标准格式
2014/09/15 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书