解决循环中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执行顺序的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 实例详解JavaScript中setTimeout函数的执行顺序

    实例详解JavaScript中setTimeout函数的执行顺序

    前言 setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实,有着一个很不平凡的名字--定时器.其实网上关于JavaScript中setTimeout的文章很多,但总感觉例子不够直接具体,因此写了个简单的例子并加以解释希望能让大家明白setTimeout是如何执行的.下面话不多说了,来一起看看详细的介绍: 实例代码如下: var time1=new Date().getTime(); console.log(1,time1); setTimeout(function()

  • for循环 + setTimeout 结合一些示例(前端面试题）

    一.背景 最近在翻看以前的老书<node.js开发指南>,恰好碰到 for 循环 + setTimeout 的经典例子,于是重新梳理了思路并记录下. 二.写在前面,setTimeout 和 setInterval 的执行机制 在日常编码中,你会发现,给 setTimeout 和 setInterval 设定延迟时间往往并不准,或者干脆 setTimeout(function(){xxx},0) 也不是立马执行(特别是有耗时代码在前),这是因为 js 是单线程的,有一个事件队列机制,setTim

  • js中setTimeout的妙用--防止循环超时

    js中setTimeout的妙用--防止循环超时

    上个周日,介绍了如何使用setTimeout代替setInterval进行间歇调用,这个周日,继续来讲<JavaScript高级程序设计>这本书里面,对于setTimeout的另一种妙用--防止循环超时  [这是铺垫,为故事的高潮埋下伏笔] JS是单线程的,一个代码块里面的代码,只能按顺序从上到下执行,所以如果中间有一块代码,执行起来非常耗时,就会导致下面的代码无法执行,出现浏览器假死的状态. JS的耗时操作,常见的有两种  1.向服务器发起请求   2.对数组的循环操作  (当然,还有一种,

  • 从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,

  • JS中setTimeout()的用法详解

    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

  • 解决循环中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报错越界的问题

    解决在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函数执行顺序问题

    详解JavaScript Alert函数执行顺序问题

    目录 问题 分析 解决 替换 Alert() 函数 setTimeOut函数 小结 问题 前几天使用 JavaScript 写 HTML 页面时遇到了一个奇怪的问题: 我想实现的功能是通过 confirm() 弹窗让用户选择不同的需求,每次选择后都将选择结果暂时输出到页面上,最后一次选择结束后再一次性将选项传到后端处理. 代码类似于: var step1 = confirm("exec step1?"); $('#result').html($('#result').html() +

  • pythonfor循环中range与len区别

    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详解

    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;

随机推荐