的Javascript setTimeout函數

Question

我調用這個函數

function drawLayers() { 

    //setTimeout(drawBlueSky,500); 
    //setTimeout(drawCircle1,1250); 
    setTimeout(drawMoon,800); 
    setTimeout(drawCircle1,2300); 
    setTimeout(drawCircle2,2700); 
    setTimeout(drawCircle3,3100); 
    setTimeout(drawCircle4,3500); 
    setTimeout(drawCircle5,3900); 
    setTimeout(drawtext2,4300); 
    setTimeout(drawtext,4700); 
    setTimeout(drawtext3,5100); 
    setTimeout(drawtext4,5500); 
    setTimeout(drawtext5,5900); 
    setTimeout(drawtext6,6300); 
    setTimeout(drawtext7,6700); 
    setTimeout(drawtext8,7100); 
    setTimeout(drawtext9,7500); 
    setTimeout(drawtext10,7900); 

} 

它調用許多其他功能狐狸前drawMoon，drawCircle1等 我呼籲播放按鈕的點擊drawLayers()功能。我需要的是，如果有人點擊停止按鈕，setTimeout功能應停止調用所有其他功能或停止它的任何位置。對於前如果drawMoon函數被調用，並在有人點擊停止所有其它功能drawCircle1，drawCircle2不應該被調用。

1. 暫停按鈕還會有第三個按鈕，點擊時會暫停setTimeout功能，如上所述。當我再次點擊相同的按鈕時，它應該從停止的地方調用函數。

這可能嗎？

Answer 1

有這樣的代碼：

var timers = []; 
function drawLayers() { 

    //setTimeout(drawBlueSky,500); 
    //setTimeout(drawCircle1,1250); 

    timers = []; 
    timers.push(setTimeout(drawMoon,800)); 
    timers.push(setTimeout(drawCircle1,2300)); 
    timers.push(setTimeout(drawCircle2,2700)); 
    timers.push(setTimeout(drawCircle3,3100)); 
    timers.push(setTimeout(drawCircle4,3500)); 
    timers.push(setTimeout(drawCircle5,3900)); 
    timers.push(setTimeout(drawtext2,4300)); 
    timers.push(setTimeout(drawtext,4700)); 
    timers.push(setTimeout(drawtext3,5100)); 
    timers.push(setTimeout(drawtext4,5500)); 
    timers.push(setTimeout(drawtext5,5900)); 
    timers.push(setTimeout(drawtext6,6300)); 
    timers.push(setTimeout(drawtext7,6700)); 
    timers.push(setTimeout(drawtext8,7100)); 
    timers.push(setTimeout(drawtext9,7500)); 
    timers.push(setTimeout(drawtext10,7900)); 

} 

function StopAll() { 
    for (var i = 0; i < timers.length; i++) 
     window.clearTimeout(timers[i]); 
} 

Answer 2

你可以讓你停車時設置爲true中央var isStopped = false;變量。然後在執行之前讓每個函數檢查變量。

Answer 3

您可以定義對應你setTimeout一個變種，然後清除它，如果你想取消超時。
例如：

// set a timeout 
timer = setTimeout("testtimeout()",3000); 

// clear the timeout 
clearTimeout(timer); 

你可以用數組和循環內所有超時在陣列上取消每超時

[編輯]好像Exelian的回答是相當清潔，更適合您的代碼

Answer 4

常見的方式做到這一點是使用clearTimeout：

var myTimeout = setTimeout(function(){ 
    alert('hi'); 
}, 500); 
clearTimeout(myTimeout); // No 'hi' alert for you, sir 

但你的情況，我建議控制所有超時更簡潔的方式：

var keepRunning = true; 

var timeouts = { 
    drawMoon: 800, 
    drawCircle1: 2300, 
    drawCircle2: 2700, 
    drawCircle3: 3100, 
    drawCircle4: 3500 
    // etc... 
}; 

for(var func in timeouts) 
    var timeout = setTimeout(func, timeouts[func]); 

// just demonstrating a timeout run function here, such as "drawMoon": 
var drawMoon = function(){ 
    ... 
    if(!keepRunning) 
     return; 
    ... 
    // probably conditionally 
    keepRunning = false; 
    ... 
}; 

Answer 5

，所以你有一個參考，你可以創建一個包含所有timeour數組去除所有這些

看看下面：

http://greengeckodesign.com/blog/2007/10/how-to-clear-all-timeouts-in-javascript.html

Answer 6

設置您的停止按鈕設置一個標誌（例如。 stopPressed = true;）。 我會寫一個函數drawNextLayer（previousLayer）。

那麼在這種情況下寫

while (stopPressed === false && previousLayer !== lastLayer) { 
    drawNextLayer(previousLayer); 
    previousLayer++; 
}