我现在在 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)
并在延迟函数完成执行后重新启动它,但是“更多代码”似乎无论如何都会执行一次。
我怎样才能解决这个问题?请举例详细说明。
最佳答案
您的 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 或异步库,但它们只是建立在相同的回调机制之上。
关于javascript - 如何延迟 Javascript 中的 setInterval?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29455528/