在clearInterval之后执行代码

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
}

处理这个问题的最佳方法是什么？延迟 // 在屏幕上打印其他内容？在循环内进行新的打印？

编辑：感谢您的回答。为了将来的参考，我的问题是触发额外打印的事件被隐藏在循环中，因此一旦执行，控制权就会交回给未完成的循环，然后覆盖它。干杯。

Answer 1

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

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
}

Answer 2

首先，您可能的意思是：

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
}