js實現(xiàn)異步循環(huán)實現(xiàn)代碼
更新時間：2016年02月16日 14:47:44 投稿：mdxy-dxy
這篇文章主要介紹了js實現(xiàn)異步循環(huán)實現(xiàn)代碼,需要的朋友可以參考下
問題
實現(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運行并調(diào)用了當(dāng)前i的值（也就是5）。
解決方法
有幾個不同的方式可以拷貝i。最普通且常用方法是通過聲明函數(shù)來建立一個閉包，并將i傳給此函數(shù)。我們這里使用了自調(diào)用函數(shù)。
運行代碼
<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)文章
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡單移動端鼠標(biāo)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要介紹了Javascript模仿淘寶信用評價功能實現(xiàn)方法,以完整實例形式分析了JavaScript響應(yīng)鼠標(biāo)事件動態(tài)改變頁面元素的相關(guān)技巧,并附帶了完整的實例代碼供讀者下載參考,需要的朋友可以參考下2015-11-11
這篇文章主要為大家介紹了Promise拋出錯誤解決基礎(chǔ)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了webpack是如何實現(xiàn)模塊化加載的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了Javascript中的匿名函數(shù)與封裝介紹,本文分析了jQuery 封裝、Backbone 封裝、Underscore 封裝等內(nèi)容,需要的朋友可以參考下2015-03-03
Bootstrap免費字體和圖標(biāo)網(wǎng)站(值得收藏)
在這篇內(nèi)容中，我們把這套框架上的免費字體圖標(biāo)做了個整合(當(dāng)然，以后還會不斷的更新)。大家對bootstrap免費字體圖標(biāo)有需要的話，可以參考本教程2017-03-03
JavaScript實現(xiàn)查找字符串中第一個不重復(fù)的字符
這篇文章主要介紹了JavaScript實現(xiàn)查找字符串中第一個不重復(fù)的字符,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了使用JavaScript通過前端發(fā)送電子郵件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
本文主要介紹了JS跳過debugger的幾種方法小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
小程序云開發(fā)教程如何使用云函數(shù)實現(xiàn)點贊功能
這篇文章主要為大家詳細(xì)介紹了小程序云開發(fā)教程如何使用云函數(shù)實現(xiàn)點贊功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05