js實(shí)現(xiàn)異步循環(huán)實(shí)現(xiàn)代碼
更新時間：2016年02月16日 14:47:44 投稿：mdxy-dxy
這篇文章主要介紹了js實(shí)現(xiàn)異步循環(huán)實(shí)現(xiàn)代碼,需要的朋友可以參考下
問題
實(shí)現(xiàn)異步循環(huán)時，你可能會遇到問題。
讓我們試著寫一個異步方法，一次循環(huán)打印一次循環(huán)的索引值。
<script>
for(var i = 0; i < 5; i++){
setTimeout(function(){
document.writeln(i);document.writeln("<br />");
},1000);
}
</script>
如上程序的輸出為：
5
5
5
5
5
原因
每次時間結(jié)束(timeout)都指向原始的i，而并非它的拷貝。所以，for循環(huán)使i增長到5，之后timeout運(yùn)行并調(diào)用了當(dāng)前i的值（也就是5）。
解決方法
有幾個不同的方式可以拷貝i。最普通且常用方法是通過聲明函數(shù)來建立一個閉包，并將i傳給此函數(shù)。我們這里使用了自調(diào)用函數(shù)。
運(yùn)行代碼
<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
您可能感興趣的文章:
相關(guān)文章
javascript動態(tài)控制服務(wù)器控件實(shí)例
在頁面中放入一個DropDownList控件，并添加一項(xiàng)，用來分析其產(chǎn)生的HTML代碼，這樣在使用js進(jìn)行動態(tài)控制時，將會非常清晰2014-09-09
這篇文章主要介紹了js實(shí)現(xiàn)有時間限制消失的圖片方法,實(shí)例分析了javascript操作setTimeout及圖片特效操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
使用Webpack構(gòu)建多頁面程序的實(shí)現(xiàn)步驟
這篇文章主要介紹了使用Webpack構(gòu)建多頁面程序的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JavaScript 利用StringBuffer類提升+=拼接字符串效率
JavaScript 利用StringBuffer類提升+=拼接字符串效率，需要的朋友可以參考下。2009-11-11
操作符~， 是按位取反的意思，表面上~~（取反再取反）沒有意義，下面有個不錯的示例，大家可以參考下2014-04-04
這篇文章主要介紹了JS數(shù)組降維的幾種方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了js中的如何定位固定層的位置,需要的朋友可以參考下2014-06-06
本文通過js和cas代碼分別給大家介紹了移動端判斷手機(jī)橫豎屏狀態(tài)的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
js簡單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法
這篇文章主要介紹了js簡單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法,涉及javascript動態(tài)操作select中option節(jié)點(diǎn)的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了uniapp自定義彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08