Question

我知道setInterval函数几乎是单线程的。但是，如果我们将时间设置为一个非常小的值，如50毫秒：

setInterval(function()
{
  // do really heavy stuff
}, 50);

然后第一个生成的事件可能无法及时完成然后我猜第二个事件被放入浏览器的队列然后是第三个，第四个等等。所以基本上这意味着浏览器的队列变得越来越快，而且显然不是好事（是吗？）

到目前为止，我已经提到了这两个解决方案：

1）等待第一个事件结束，然后再调用第二个事件（使用超时）：

var func = function()
{
  setTimeout(function()
  {
    // do really heavy stuff and when it's finished call again
    func();
  }, 50)
}

2）创建一个监视事件状态的标志：

var isIntervalInProcess = false;
setInterval(function()
{
  if ( isIntervalInProcess )
    return false;

  isIntervalInProcess = true;

  // do really heavy stuff

  isIntervalInProcess = false;

}, 50);

摆脱事件的最佳做法是否重叠？

Answer 1

那些摆脱事件重叠的最佳做法是什么？

您提供的第一个示例是用于避免setInterval陷阱的常用技巧。就“最佳实践”而言，你应该为正确的情况选择合适的技术（是的，不幸的是，它很模糊）。

使用setInterval动画来短时间使用短暂的间隔是很常见的。在这些情况下，应该简化回调以提高性能并轻松取消。 jQuery使用15ms的延迟，效果很好。

对于运行时间较长的函数，最好将它们分解为异步函数队列。一遍又一遍地排队相同的功能与您的第一个setTimeout示例相同。

您的第二个示例存在回调队列中的项永远不会乱执行的问题。第二个排队函数只有在第一个函数执行完后才会被称为，此时可以排队2或3个函数。

然而，有一种cached polling技术允许回调的主体仅在发生状态更改时才执行：

(function () { var temp; setInterval(function () { var val; val = getSomeValue(); //some fast data accessor if (val === temp) { return; //break out of the function early } ...code to execute when the state has changed... temp = val; //cache the last state }, shortDelay); }());

setInterval（）浏览器队列

1 个答案: