解决循环中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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
Vue.use源码分析
Apr 22 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
php读取本地json文件的实例
2018/03/07 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
tensorflow获取变量维度信息
2018/03/10 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
pandas数据集的端到端处理
2019/02/18 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
德国高性价比网上药店:medpex
2017/07/09 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
房地产营销策划方案
2014/02/08 职场文书
环保倡议书100字
2014/05/15 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
安全生产学习心得体会
2016/01/18 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python