<script type="text/javascript" > window.onload=function(){ for(var i=1;i<3;i++){ var m ="i="+i; setInterval(function(){test(m);},4000); } } function test(e) { alert(e); } </script>
上面這段代碼的運行結果是:
alert 只彈出i=2;
這樣的結果給人一種好像只創建了一個setInterval方法或者說是定時器吧.其實如果你自己看還是會發現有時彈出的對話框是連續的兩個對話框的,所以這個程序說明for循環中是初始化了兩個計時器的.只不過是因為變量的問題所以產生了這種奇異的現象.
原因是setInterval這個計數器是在延遲4秒后才進行調用,而在這期間for循環還是會繼續運行的,那么當setInterval執行時i的值已經變成2了;
<script type="text/javascript" > window.onload=function(){ for(var i=1;i<3;i++){ setInterval(function(){test(i);},4000); } } function test(e) { alert(e); } </script>
那么上面這個alert的值卻是3;這也就是說i傳到setInterval這個計數器中的function參數是3,這個也是因為延遲的問題,當for循環執行完時i的值是3<因為i++了>
那么如何處理這種問題了:
這是一段代碼:
[html] <html> <head> <script type="text/javascript"> function intervalTest(){ var cks = document.getElementsByName("check"); for(var i=0;i<cks.length;i++){ if(cks[i].checked == true){ mySetInterval(test,(3-i)*1000,i); } } } function test(e) { console.log(e); } function mySetInterval(f,time,param){ setInterval(function(){f(param);},time); } </script> </head> <body> <input name="check" type="checkbox" id="1"/>OneCheck <input name="check" type="checkbox" id="2"/>TwoCheck <input name="check" type="checkbox" id="3"/>ThreeCheck <input type="button" onclick="intervalTest()" value="IntervalTest"/> </body> </html>
上面主要是寫了一個自己的方法mySetInterval(f,time,param)其中f為回調函數的名稱,time為設置的間隔時間,param為f函數的參數值.
這樣寫的意思就是說當你在循環的時候就直接先調用我的這個方法,然后把參數傳給我,然后你在進行for循環,這樣就保證了每次傳入的值不會在延遲time后而變化.