javascript - js中带有new Date()的定时器

Question

我得到了 5 个精灵（5 个块，下一个比上一个小）。他们画得太快了。如何正确使用 new Date()、getMilliseconds 或其他会延迟绘制的计时器方法？

例如。

for ( i = 0; i < 5; i ++ ) {
    xxx.drawImage(sprite, i, etc);
}

Answer 1

使用setInterval()或setTimeout()设置定时器。但是由于 javascript 的单线程特性，您应该注意到这两个函数之间的细微差别。让我们看一下这个例子：

setTimeout(function test() {
   //your code
   setTimeout(test, 100);
}, 100);

setInterval(function() {
     //your code
}, 100);

这两个代码块看起来是相同的，但由于 javascript 的单线程特性，情况并非如此。

• With setInterval(): 如果您的代码正忙于执行并且需要很长时间才能完成。当您的代码仍在执行时，下一个间隔可能会触发，并且这些间隔将排队。最后，您可能会得到一些处理程序连续运行而没有任何延迟

• With setTimeout(): 下一个间隔仅设置为在当前代码完成时触发。这保证了下一次执行永远不会小于间隔（在本例中为 100），只会等于或更长。