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