js实现异步循环实现代码

2024-12-23 22:21:33

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

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

<script>
for(var i = 0; i < 5; i++){
setTimeout(function(){
document.writeln(i);document.writeln("<br />");
},1000);
}
</script>

如上程序的输出为：

5
5
5
5
5

原因

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

解决方法

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

运行代码

<script>
for(var i = 0; i < 5; i++){
(function(num){
setTimeout(function(){
document.writeln(num);document.writeln("<br />");
},1000);
})(i);
}
</script>

输出

0
1
2
3
4

深入探究JavaScript中for循环的效率问题及相关优化

Underscore.js库你一天(一周)内写了多少个循环了? var i; for(i = 0; i < someArray.length; i++) { var someThing = someArray[i]; doSomeWorkOn(someThing); } 这当然无害,但这种写法非常丑而且奇怪,这也不是真正需要抱怨的.但这种写法太平庸了. var i, j; for(i = 0; i < someArray.length; i++) { var someThing = some
理解JS事件循环

伴随着JavaScript这种web浏览器脚本语言的普及,对它的事件驱动交互模型,以及它与Ruby.Python和Java中常见的请求-响应模型的区别有一个基本了解,对您是有益的.在这篇文章中,我将解释一些JavaScript并发模型的核心概念,包括其事件循环和消息队列,希望能够提升你对一种语言的理解,这种语言你可能已经在使用但也许并不完全理解. 这篇文章是写给谁的? 这篇文章是针对在客户端或服务器端使用或计划使用JavaScript的web开发人员的.如果你已经精通事件循环,那么这篇文章的大部
三个js循环的关键字示例(for与while)

循环的三种写法: <!doctype html> <title>js循环 by 我们</title> <meta charset="utf-8"/> <meta name="keywords" content="js循环 by 我们" /> <meta name="description" content="js循环 by 我们" />
javascript图片切换综合实例（循环切换、顺序切换）

本文实例为大家介绍了javascript图片切换的两种方式,循环切换以及顺序切换的实例代码,分享给大家供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <style> p{margin:0;} input{border:none;outline: none;margin:0;padding:0;} img{width:300px;height:300px;} #loop{margin-le
javascript实现label标签跳出循环操作

出场: 首先我们来说说为什么需要label标签,虽然我们已经知道有break,continue跳出循环,但如果是多重循环那么它们就显的无能为力了,所以就出现了label这个标签来为我们服务. 我们先来看看单独使用break的情况 for(var i=0;i<4;i++){ for(var j=0;j<4;j++){ if(i===1&&j===1){ break; }else{ console.log("i:"+i+"--j:"+j);
JavaScript中循环遍历Array与Map的方法小结

js循环数组各种方法 eg1: for (var i = 0; i < myStringArray.length; i++) { alert(myStringArray[i]); //Do something } eg2: Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c']; for (var i in array) { alert(array[i]); } for(var i in this.$GLOBAL_DET
理解javascript中Map代替循环

本文介绍了map给我们的js编程带来的好处及便利: 1.Map能干什么 map可以实现for循环的功能: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> var arr = ['val1', 'val2'
基于JavaScript实现瀑布流效果(循环渐近)

1.建立Html模版想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流</title> </head> <body> <div class="container
javascript每日必学之循环

朋友们大家好,今天,我们继续接着前面的内容讲,前们我们已经讲了条件分支,今天我们就讲循环,顾名思义就是,重复执行相同的操作,正常循环是受程序控制的,不正常的情况,就会出现死循环,那就是我们的代码中出现bug,那样,我们还要学会调式bug,等我们先把基础知识讲完了之后,我还会专门用篇幅来讲解浏览器里面的调试,那种程序就会在我们掌控之中,这才是我们想要结果. 循环包括的结构体有 for , while , do--while,for循环有两种形式的存在,一种是数字变量变化所引起的循环,另一种就是fo
高性能JavaScript循环语句和条件语句

一.循环语句众所周知,常用的循环语句有for.while.do-while以及for-in,forEach.除了for-in和forEach性能略低外,平时我们对前三者的选择更多的是基于需求而非性能考虑,今天我们就对它们各自的性能做个测试,告诉我们最极端的情况下还能做哪些优化. 首先我们来谈谈为何for-in和forEach会比其他的慢.for-in一般是用在对象属性名的遍历上的,由于每次迭代操作会同时搜索实例本身的属性以及原型链上的属性,所以效率肯定低下:而forEach是基于函数的迭代(需

js实现异步循环实现代码

相关推荐

随机推荐