如何在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 线程“卡住”并提示中止它。

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