@(编程)

问题

实现异步循环时,你可能会遇到问题。

让我们试着写一个异步方法,每秒打印一次循环的索引值。

for(var i = 0; i < 5; i++)
{
setTimeout(function(){
console.log(i);
},1000);
}

如上程序的输出为:

5
5
5
5
5

原因

每次时间结束(timeout)都指向原始的i,而并非它的拷贝。所以,for循环使i增长到5,之后timeout运行并调用了当前i的值(也就是5)。

解决方法

有几个不同的方式可以拷贝i。最普通且常用方法是通过声明函数来建立一个闭包,并将i传给此函数。我们这里使用了自调用函数。

for(var i = 0; i < 5; i++)
{
(function(num){
setTimeout(function(){
console.log(num);
},1000);
})(i);
}

输出

0
1
2
3
4

参考

https://github.com/loverajoel/jstips

js实现异步循环的更多相关文章

  1. JS对异步循环使用递归

    场景:有一个函数接收一个URL的数组,要求依次下载每个文件直到所有文件被成功下载. 如果API是同步的,很容易使用一个循环来实现 var downloadAllSync = function(urls ...

  2. 【译】深入理解python3.4中Asyncio库与Node.js的异步IO机制

    转载自http://xidui.github.io/2015/10/29/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3python3-4-Asyncio%E5%BA%93% ...

  3. Node.js之异步流控制

    前言 在没有深度使用函数回调的经验的时候,去看这些内容还是有一点吃力的.由于Node.js独特的异步特性,才出现了"回调地狱"的问题,这篇文章中,我比较详细的记录了如何解决异步流问 ...

  4. 探秘JS的异步单线程

    对于通常的developer(特别是那些具备并行计算/多线程背景知识的developer)来讲,js的异步处理着实称得上诡异.而这个诡异从结果上讲,是由js的“单线程”这个特性所导致的. 我曾尝试用“ ...

  5. JS JavaScript事件循环机制

    区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...

  6. Node.js:事件循环

    ylbtech-Node.js:事件循环 1.返回顶部 1. Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 ...

  7. js 同步 异步 宏任务 微任务 文章分享

    分享一篇 写的很好的 宏任务 微任务  同步异步的文章 文章原地址: https://juejin.im/post/59e85eebf265da430d571f89 这一次,彻底弄懂 JavaScri ...

  8. JS中For循环中嵌套setTimeout()方法的执行顺序

    在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢? 代码如下 function time() { for(var i= 0;i<5;i++){ setTimeout(fu ...

  9. Node.js 的事件循环机制

    目录 微任务 事件循环机制 setImmediate.setTimeout/setInterval 和 process.nextTick 执行时机对比 实例分析 参考 1.微任务 在谈论Node的事件 ...

随机推荐

  1. HTML网页插入图像

    一.WEB上支持的图片格式: GIF:能保存256中颜色,支持透明色,支持动画效果 JPEG:不支持透明色和动画,颜色可达1670种 PNG:支持透明色,不支持动画,颜色有几种到1670种 二.将图片 ...

  2. POJ 3628 Bookshelf 2【01背包】

    题意:给出n头牛的身高,以及一个书架的高度,问怎样选取牛,使得它们的高的和超过书架的高度最小. 将背包容量转化为所有牛的身高之和,就可以用01背包来做=== #include<iostream& ...

  3. 了解Objective-C中NSAutoreleasePool使用方法

    本文的目的是来了解Objective-C中NSAutoreleasePool使用方法,Objective-C的Foundation库实际上是种运行级对象系统,与一般的对象语言,例如C++,Java不一 ...

  4. Asp.net中的HttpModule和HttpHandler的简单用法

    在Asp.net中,HttpModule和HttpHandler均可以截取IIS消息进行处理,这使得我们制作人员能够非常方便的进行诸如图片水印添加,图片盗链检查等功能. 下面先就HttpModule的 ...

  5. tcp协议中mss的理解

    在介绍MSS之前我们必须要理解下面的几个重要的概念.<blockquote>MTU: Maxitum Transmission Unit 最大传输单元MSS: Maxitum Segmen ...

  6. Android 异步加载神器Loader全解析

    在之前呢,我们经常会有这种需求,比如在某个activity,或者某个fragment里面,我们需要查找某个数据源,并且显示出来,当数据源自己更新的时候,界面也要及时响应. 当然咯,查找数据这个过程可能 ...

  7. PHP的cURL库:抓取网页,POST数据及其他,HTTP认证 抓取数据

    From : http://developer.51cto.com/art/200904/121739.htm 下面是一个小例程: ﹤?php// 初始化一个 cURL 对象$curl = curl_ ...

  8. Image.FromFile 方法锁住文件解决方法

    Image.FromFile  一旦使用后,对应的文件在一直调用 其生成的Image对象被Disponse前都不会被解除锁定,这就造成了一个问题,就是在这个图形被解锁前无法对图像进行操作(比如删除,修 ...

  9. js中判断是不是数字

    使用isaNa来进行判断,这个函数的底层实现是:Nunmber,如果经过转化是数字则返回false,否则返回true Number('100px')返回的是ANA,parseInt('100px')返 ...

  10. java多态中哪些成员具备多态特性

    在多态的学习中,当子类继承父类时,子类中的变量哪些具备多态特性,哪些不具备多特特性. 代码: class Father{ public static int x=10; public int y=11 ...