setInterval 傳值設引數
阿新 • • 發佈：2018-11-14
<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後而變化.