解决循环中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, ...)。立即执行函数会立即执行。
以上这篇解决循环中setTimeout执行顺序的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
for循环 + setTimeout 结合一些示例(前端面试题)
一.背景 最近在翻看以前的老书<node.js开发指南>,恰好碰到 for 循环 + setTimeout 的经典例子,于是重新梳理了思路并记录下. 二.写在前面,setTimeout 和 setInterval 的执行机制 在日常编码中,你会发现,给 setTimeout 和 setInterval 设定延迟时间往往并不准,或者干脆 setTimeout(function(){xxx},0) 也不是立马执行(特别是有耗时代码在前),这是因为 js 是单线程的,有一个事件队列机制,setTim
-
js中setTimeout的妙用--防止循环超时
上个周日,介绍了如何使用setTimeout代替setInterval进行间歇调用,这个周日,继续来讲<JavaScript高级程序设计>这本书里面,对于setTimeout的另一种妙用--防止循环超时 [这是铺垫,为故事的高潮埋下伏笔] JS是单线程的,一个代码块里面的代码,只能按顺序从上到下执行,所以如果中间有一块代码,执行起来非常耗时,就会导致下面的代码无法执行,出现浏览器假死的状态. JS的耗时操作,常见的有两种 1.向服务器发起请求 2.对数组的循环操作 (当然,还有一种,
-
JS中setTimeout()的用法详解
setTimeout setTimeout 语法例子 用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTimeout 停止 计分及计秒的 counter clearTimeout Set flag 1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTimeOut()停止 1.5 计分及秒的co
-
实例详解JavaScript中setTimeout函数的执行顺序
前言 setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实,有着一个很不平凡的名字--定时器.其实网上关于JavaScript中setTimeout的文章很多,但总感觉例子不够直接具体,因此写了个简单的例子并加以解释希望能让大家明白setTimeout是如何执行的.下面话不多说了,来一起看看详细的介绍: 实例代码如下: var time1=new Date().getTime(); console.log(1,time1); setTimeout(function()
-
从setTimeout看js函数执行过程
老实说,写这篇文章的时候心里是有点压抑的,因为受到打击了,为什么?就 因为喜欢折腾不小心看到了这个"简单"的函数: for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i) }, i * 1000); } console.log(i); 什么?这不就是我很久之前看到的先打印一个5,再打印一个5,之后每隔一秒就打印一个5,直到打印完6个5的实现方法吗?那么问题来了,如果我要依次打印0,1,2,3,4,
-
解决循环中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
-
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
本文介绍了详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序,分享给大家,具体如下: 先举一个比较典型的例子: setImmediate(function(){ console.log(1); },0); setTimeout(function(){ console.log(2); },0); new Promise(function(resolve){ console.log(3); resolve(); conso
-
解决在for循环中remove list报错越界的问题
最近在搞一个购物车的功能,里面有一个批量删除的操作,采用的是ExpandableListView以及BaseExpandableListAdapter.视乎跟本篇无关紧要,主要是为了记录一个java基础.迭代器iterator的使用 一.错误代码(主要就是购物车的批量删除) /** * 删除选中的 */ public void delSelect() { int groupSize; if (mGropBeens != null) { groupSize = mGropBeens.size();
-
解决Golang中goroutine执行速度的问题
突然想到了之前一直没留意的for循环中开goroutine的执行顺序问题,就找了段代码试了试,试了几次后发现几个有意思的地方,我暂时没有精力往更深处挖掘,希望有golang大神能简单说一说这几个地方是怎么回事. 代码: package main import "fmt" func Count(ch chan int) { fmt.Println("Count doing") ch <- 1 fmt.Println("Counting") }
-
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>验证加载顺序</title> <script src=
-
对python中的try、except、finally 执行顺序详解
如下所示: def test1(): try: print('to do stuff') raise Exception('hehe') print('to return in try') return 'try' except Exception: print('process except') print('to return in except') return 'except' finally: print('to return in finally') return 'finally'
-
详解JavaScript Alert函数执行顺序问题
目录 问题 分析 解决 替换 Alert() 函数 setTimeOut函数 小结 问题 前几天使用 JavaScript 写 HTML 页面时遇到了一个奇怪的问题: 我想实现的功能是通过 confirm() 弹窗让用户选择不同的需求,每次选择后都将选择结果暂时输出到页面上,最后一次选择结束后再一次性将选项传到后端处理. 代码类似于: var step1 = confirm("exec step1?"); $('#result').html($('#result').html() +
-
pythonfor循环中range与len区别
目录 range(x) range(start,stop) range(start,stop,step) len() len不支持 int 或者float range(len()) 用range常见错误 range(x) range(9) 代表着0.1.2.3.4.5.6.7.8 这九个顺序数字的集合.也就是 range(9) => range(0,9) => [0,1,2,3,4,5,6,7,8] 我们尝试用 for 打印 range(9): 此外,range还有另外两种用法,形如切片: r
-
JavaScript变量or循环中的var和let详解
目录 在for循环中使用var声明初始化带来的问题 解决方法 使用闭包 使用let变量初始化 for循环怎么处理用let和var声明的初始化变量? 总结 在for循环中使用var声明初始化带来的问题 // 一道经典面试题: var funcs = []; for (var i = 0; i < 3; i++) { funcs[i] = function() { console.log("My value: " + i) }; } for (var j = 0; j < 3;
随机推荐
- 正则基础之 \b 单词边界
- 一串字字符中多个逗号替换为一个 既标准分隔符(正则表达式)
- SpringBoot拦截器实现对404和500等错误的拦截
- ASP.NET MVC5添加验证(4)
- 使用JS轻松实现ionic调用键盘搜索功能(超实用)
- ThinkPHP连接数据库的方式汇总
- PHP生成随机密码方法汇总
- C#实现发送简单HTTP请求的方法
- 轻松掌握JavaScript策略模式
- 用JS写的简单的计算器实现代码
- Linux系统下安装rz/sz命令及使用说明(详解)
- PHP函数getenv简介和使用实例
- jquery动感漂浮导航菜单代码分享
- 避免回车键导致的页面无意义刷新的解决方法
- C# BackgroundWorker组件学习入门介绍
- Android调用系统默认浏览器访问的方法
- Java实现两人五子棋游戏(三) 画出棋子
- Android 仿微信底部渐变Tab效果
- Android曲线更圆滑的签名画板
- Linux redis-Sentinel配置详解