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)用了當前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)文章
javascript動態(tài)控制服務(wù)器控件實例
在頁面中放入一個DropDownList控件,并添加一項,用來分析其產(chǎn)生的HTML代碼,這樣在使用js進行動態(tài)控制時,將會非常清晰2014-09-09使用Webpack構(gòu)建多頁面程序的實現(xiàn)步驟
這篇文章主要介紹了使用Webpack構(gòu)建多頁面程序的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-03-03JavaScript 利用StringBuffer類提升+=拼接字符串效率
JavaScript 利用StringBuffer類提升+=拼接字符串效率,需要的朋友可以參考下。2009-11-11js簡單實現(xiàn)Select互換數(shù)據(jù)的方法
這篇文章主要介紹了js簡單實現(xiàn)Select互換數(shù)據(jù)的方法,涉及javascript動態(tài)操作select中option節(jié)點的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08