的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++; 
}