Question

我有一个setInterval调用一个显示动画的循环。

当我clearInterval响应用户输入时，队列中可能有一个或多个循环回调。如果我在clearInterval语句之后直接调用函数，则函数调用首先完成（将某些内容打印到屏幕上），然后执行排队的循环回调，删除我想要打印的内容。

请参阅下面的代码。

function loop() {
    // print something to screen
}

var timer = setInterval(loop(), 30);

canvas.onkeypress = function (event) {
    clearInterval(timer);
    // print something else to screen
}

处理此问题的最佳方法是什么？延迟// print something else to screen？在循环中进行新打印？

编辑：谢谢你的回答。为了将来参考，我的问题是触发额外打印的事件被埋没在循环中，所以一旦执行，控制就会被传回未完成的循环，然后覆盖它。欢呼声。

Answer 1

首先，你可能意味着：

var timer = setInterval(loop, 30);

其次，您确定调用clearInterval不会清除待处理loop()调用的队列吗？如果是这种情况，您可以通过使用某种防护来轻松禁用这些调用：

var done = false;

function loop() {
    if(!done) {
      // print something to screen
    }
}

var timer = setInterval(loop(), 30);

canvas.onkeypress = function (event) {
    clearInterval(timer);
    done = true;
    // print something else to screen
}

Answer 2

您还可以使用标志以忽略任何排队的函数：

var should;

function loop() {
    if(!should) return; // ignore this loop iteration if said so

    // print something to screen
}

should = true;
var timer = setInterval(loop, 30); // I guess you meant 'loop' without '()'

canvas.onkeypress = function (event) {
    should = false; // announce that loop really should stop
    clearInterval(timer);
    // print something else to screen
}

在clearInterval之后执行代码

2 个答案: