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);

}

调用许多其他函数fox ex drawMoon，drawCircle1等我点击播放按钮调用drawLayers()功能。我需要的是，如果有人点击停止按钮，setTimeout功能应该停止调用所有其他功能或停在任何地方。例如，如果调用drawMoon函数并且有人点击停止所有其他函数drawCircle1，则不应调用drawCircle2。

暂停按钮也会有第三个按钮，单击该按钮将暂停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

您可以制作一个中央var isStopped = false;变量，在停止时将其设置为true。然后在执行之前让每个函数检查变量。

Answer 3

您可以定义与setTimeout对应的var，如果要取消超时，则清除它例如：

// 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

您可以创建一个包含所有时间的数组，以便您可以删除所有这些

看看下面的内容：

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

Javascript setTimeout函数

6 个答案: