logo标签列表

JavaScript的setTimeout函数

javascript
3
我正在调用这个函数。
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函数。当再次单击同一按钮时，它应该从它停止的位置继续调用函数。

这可能吗？

6个回答
3

有这样的代码：

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]);
}
1

你可以定义一个与你的setTimeout相对应的变量，如果你想要取消超时，则清除它。
例如：

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

// clear the timeout
clearTimeout(timer);

你可以将所有的超时时间包装在一个数组中，并循环遍历该数组以取消每个超时。[编辑]看起来Exelian的答案更简洁并且更适合你的代码。
1

常见的做法是使用 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;
    ...
};
1
你可以创建一个中央变量 var isStopped = false;，当停止时将其设置为 true。然后在每个函数执行之前检查该变量。
在这种情况下，您将删除超时并继续运行。 - Massimiliano Peluso
1
0

将您的停止按钮设置为设置标志（例如，stopPressed = true;）。

我会编写一个函数drawNextLayer(previousLayer)。

然后写入：

while (stopPressed === false && previousLayer !== lastLayer) {
    drawNextLayer(previousLayer);
    previousLayer++;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接