javascript - 如何延迟 Javascript 中的 setInterval？

Question

我现在在 JavaScript 中反复遇到一个奇怪的问题。我似乎不能再延迟 setInterval。

发生的事情的一个小例子:

var loop;
var count;
loop = setInterval(start, 30);

function start() {
    //Some code

    delay();

    //Some more code
}

function delay() {
    setTimeout(function () {
        count++;

        //Animation code

        if (count <= 1000) delay();
    }, 100);
}

现在我想做的是，执行“一些代码”部分，在“动画代码”执行时什么都不做，然后执行“更多代码”部分。

发生的事情是“更多代码”部分和延迟函数同时执行。我在调用延迟函数之前尝试了 clearInterval(loop) 并在延迟函数完成执行后重新启动它，但是“更多代码”似乎无论如何都会执行一次。

我怎样才能解决这个问题？请举例详细说明。

Answer 1

您的 delay() 函数实际上并没有阻止您的 start() 函数完成。

在 Javascript 中，setTimeout() 不会暂停 Javascript 的执行。相反，它所做的是安排传递给 setTimeout() 的回调在未来的某个时间运行，而您的其余代码将继续运行。

如果你想在一段时间内延迟执行某个代码块，那么你必须将该代码块放入 setTimeout() 回调中，如下所示:

setTimeout(function() {
    // the code in here will run some time in the future
}, delayTime);

// the code here will run immediately

这在 Javascript 中经常描述的方式是说对 setTimeout() 的调用是非阻塞的。它不会停止或暂停当前执行线程的运行。事实上，执行线程将运行完成。相反，setTimeout() 安排一个回调函数在将来的特定时间调用(当没有其他 Javascript 代码正在运行时)。

因为 Javascript 是单线程的，它几乎永远不会通过循环来尝试创建延迟，即使您使用非常长的 while() 循环也是如此。问题是，当你在循环时，没有其他 Javascript 代码可以运行，所以没有其他状态可以改变，所以无论你等待改变的循环条件在你循环时都不会改变。这通常只会导致死锁类型的情况，最终浏览器会意识到 Javascript 线程“卡住”并会提示中止它。

相反，您使用事件和 future 回调进行编程。您设置一个事件或计时器回调，以便在将来某个时间发生某事时调用它，然后将相关代码放入该回调或事件处理程序中。还有更高级的工具可以帮助管理这一点，例如 promises 或异步库，但它们只是建立在相同的回调机制之上。