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增長(zhǎng)到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)文章
javascript動(dòng)態(tài)控制服務(wù)器控件實(shí)例
在頁面中放入一個(gè)DropDownList控件,并添加一項(xiàng),用來分析其產(chǎn)生的HTML代碼,這樣在使用js進(jìn)行動(dòng)態(tài)控制時(shí),將會(huì)非常清晰2014-09-09js實(shí)現(xiàn)有時(shí)間限制消失的圖片方法
這篇文章主要介紹了js實(shí)現(xiàn)有時(shí)間限制消失的圖片方法,實(shí)例分析了javascript操作setTimeout及圖片特效操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02使用Webpack構(gòu)建多頁面程序的實(shí)現(xiàn)步驟
這篇文章主要介紹了使用Webpack構(gòu)建多頁面程序的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03JavaScript 利用StringBuffer類提升+=拼接字符串效率
JavaScript 利用StringBuffer類提升+=拼接字符串效率,需要的朋友可以參考下。2009-11-11使用JS判斷移動(dòng)端手機(jī)橫豎屏狀態(tài)
本文通過js和cas代碼分別給大家介紹了移動(dòng)端判斷手機(jī)橫豎屏狀態(tài)的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-07-07js簡(jiǎn)單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)Select互換數(shù)據(jù)的方法,涉及javascript動(dòng)態(tài)操作select中option節(jié)點(diǎn)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08