解决循环中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 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php中使用url传递数组的方法
2015/02/11 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
js+html制作简单验证码
2017/02/16 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
python获得图片base64编码示例
2014/01/16 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
真诚的求职信
2014/07/04 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
MySQL数据库 任意ip连接方法
2022/05/20 MySQL