首頁猿問請問這個無線循環(huán)的問題出在哪了？

請問這個無線循環(huán)的問題出在哪了？

JavaScript

慕粉4062053 2016-12-13 20:09:05

在瀏覽器中運行后，點一下”開始“按鈕，文本框中的數(shù)字就會按照setTimeout()中設(shè)計的時間間隔來運行，但是在代碼運行的時候再次點擊“開始”按鈕，文本框中的數(shù)字變化的時間間隔就會變快，請問是什么原因呢？<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>無限循環(huán)</title> <script type="text/javascript"> var num=0; function numCount(){ ? document.getElementById('text').value=num; ? num=num+1; ? setTimeout("numCount()",1000); } </script> </head> <body> <input type="text" id="text" /> <input type="button" value="開始" onclick="numCount()" ?/> </body></html>

查看完整描述

3 回答

已采納

MarlboroKay

TA貢獻189條經(jīng)驗獲得超236個贊

有相同超時時間的定時器，按添加的順序觸發(fā)
setTimeout方法被執(zhí)行后，會加入到JS的定時器執(zhí)行隊列中，JS會計算超時的時間的先后設(shè)置好觸發(fā)的時間點，當事件循環(huán)檢查到有定時器需要觸發(fā)就執(zhí)行對應(yīng)的函數(shù)

var?num=0;
var?timeTag;
function?numCount(){
?clearTimeout(timeTag);
	
??document.getElementById('text').value=num;
??num=num+1;
?
??timeTag?=?setTimeout('numCount()',1000);
}

感謝邀請，望采納！

4 反對回復 2016-12-13

慕粉4062053
謝謝指點

回復 2016-12-14
MarlboroKay
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無限循環(huán)</title> <script type="text/javascript"> var num=0; var timeTag; function numCount(){ clearTimeout(timeTag); document.getElementById('text').value=num; num=num+1; timeTag=setTimeout("numCount()",1000); } </script> </head> <body> <input type="text" id="text" /> <input type="button" value="開始" onclick="numCount()" /> </body> </html> 可以

回復 2016-12-14
慕粉4062053
謝謝了

回復 2017-01-08

點擊展開后面1條

Siming0

TA貢獻16條經(jīng)驗獲得超32個贊

再次點擊“開始”的時候就再次運行了numCount()；這樣相當于再設(shè)定了定時器，這樣會疊加時間的，時間間隔就會變快，?應(yīng)該在setTimeout("numCount()",1000);先清除定時器clearTimeout(timer)（不管有沒有，清除掉先）然后進行定義這個定時器為var timer=setTimeout("numCount()",1000); 這樣就不會再次疊加了

4 反對回復 2016-12-13