殺jquery setTimeout

Question

loading = setTimeout(function(){$("#myDiv").html('3');},1500) 
loading = setTimeout(function(){$("#myDiv").html('2');},2500) 
loading = setTimeout(function(){$("#myDiv").html('1');},3500) 
loading = setTimeout(function(){$("#myDiv").html('Go!');},4500) 

我有代碼，例如倒計時，直到開始。但是，如果用戶點擊一個名爲「停止」的按鈕，我希望倒計時停止。我知道clearTimeout，我已經使用clearTimeout（加載），但這不起作用。我相信這是因爲加載是在稍後重新定義的。

感謝

Answer 1

clearTimout是行不通的，因爲你重用「正在載入」變量。試試這個：

loading1 = setTimeout(function(){$("#myDiv").html('3');},1500); 
loading2 = setTimeout(function(){$("#myDiv").html('2');},2500); 
loading3 = setTimeout(function(){$("#myDiv").html('1');},3500); 
loading4 = setTimeout(function(){$("#myDiv").html('Go!');},4500); 


$("#stop").click(function(e) { 
    e.preventDefault(); 

    clearTimeout(loading1); 
    clearTimeout(loading2); 
    clearTimeout(loading3); 
    clearTimeout(loading4); 
}); 

Answer 2

點擊停止應該設置一個布爾值，你可以改變HTML之前在每個setTimout功能檢查。

var loading = [], 
    mydiv = document.getElementById("myDiv"), 
    stopped = false; 

function countdown(number){ 
    if(!stopped){ 
     mydiv.innerHTML = number; 
    } 
} 

loading[0] = setTimeout(function(){countdown("3")},1500); 
loading[1] = setTimeout(function(){countdown("2")},2500); 
loading[2] = setTimeout(function(){countdown("1")},3500); 
loading[3] = setTimeout(function(){countdown("0")},4500); 

$("#stop").on("click", function(e){ 
    e.preventDefault(); 
    stopped = true; 
}); 

在這裏找到JSFiddle。

Answer 3

隨着setInterval，你就能真正暫停計時器（這是不可能的setTimeout）：

var previousTime = Date.now(); 
var elapsed = 0; 
var stop = false; 
var step = 3; 

var timer = setInterval(function(){countdown()},100); 

var countdown = function() { 
    if (!stop) { 
     elapsed += Date.now() - previousTime; 
    } 
    previousTime = Date.now(); 

    if (elapsed >= 1500 && step == 3) { 
     $("#myDiv").html('3'); 
     step--; 
    } 
    else if (elapsed >= 2500 && step == 2) { 
     $("#myDiv").html('2'); 
     step--; 
    } 
    else if (elapsed >= 3500 && step == 1) { 
     $("#myDiv").html('1'); 
     step--; 
    } 
    else if (elapsed >= 4500 && step == 0) { 
     $("#myDiv").html('Go!'); 
     step = 1000; 
     clearInterval(timer); 
    } 
} 

$("#stop").click(function(e) { 
    e.preventDefault(); 

    stop = true; 
}); 

JsFiddle