降低 Javascript 事件轮询的频率

Question

如何降低 Javascript 事件轮询的频率？我关心的事件是 onResize 和 onScroll。当有人调整浏览器大小或向下滚动时，这些事件可能每秒触发数十次。我希望这些事件每 500 毫秒只发生一次，这样我就不必花费数小时来优化我的事件处理程序并确保它们不会泄漏内存。

Answer 1

var resizeTimeout;

window.onresize = function() {
    if (resizeTimeout) {
        clearTimeout(resizeTimeout);
    }
    resizeTimeout = setTimeout(function() {
        // Do it!
    }, 500);

});

这将在用户完成调整大小后大约 500 毫秒触发 setTimeout() 函数。

onscroll 版本非常相似:)

Answer 2

您无法真正控制事件触发的频率，您可以执行一些操作，例如记住第一个事件触发的时间，然后在每个后续事件中检查距第一个事件是否超过 500 毫秒 - 如果是，则继续处理该事件处理程序，否则您只需退出事件处理程序

Answer 3

在处理程序的开始处，检查自上一个处理程序以来是否已经过去了 500 毫秒，如果没有则返回。

Answer 4

您无法阻止这些事件的触发。他们总是这样做。您要做的就是立即停止监听，然后处理该事件以避免重复。然后整个处理程序在setTimeout之后再次设置。除非有人调整窗口大小，否则不会再发生递归。我在这里使用 5000ms，因为更容易在控制台中看到它的工作情况。即使您像垃圾邮件一样调整大小，每 5 秒在 FF 控制台中也不应该看到超过一封垃圾邮件。

(function staggerListen(){
  window.onresize = function(){
    window.onresize = false;
    console.log('spam');
    setTimeout(staggerListen,5000);
  };
})()

每次处理程序触发时使用逻辑来决定是否执行任何操作从技术上讲仍然是触发处理程序和 if 语句 + 查找。那会变得很重。

Answer 5

检查下划线 debounce 函数

创建并返回所传递函数的新去抖版本，该版本将推迟其执行，直到自上次调用以来经过等待毫秒后。对于实现仅应在输入停止到达后发生的行为很有用。例如：渲染 Markdown 注释的预览、在窗口停止调整大小后重新计算布局等等。

例子：

window.onscroll = _.debounce(
  function() {
      // do something
  }, 500, false
);

Answer 6

我曾经把它做得像接受的答案一样，但问题是，它只在指定的超时后触发。我想要一个能够在第一次就立即处理大小调整的解决方案。这就是我最终所做的。

var _resize_is_busy = false;
var _resize_scheduled = false;
var _resize_precision = 100;

// This register for window resize events. No need to change anything.
$(window).resize(function () {

    if (!_resize_is_busy) {

        // call the scheduler who will do the work and set a timer to
        // check of other resizes occured within a certain period of time

        _resize_scheduler();
    }
    else {

        // the resizer is busy, i.e. a resize have been handled a little
        // time ago and then the scheduler is waiting some time before 
        // handling any other resize. This flag tells the scheduler that
        // a resize event have been receive while he was sleeping.

        _resize_scheduled = true;
    }
});

// This is the scheduler. No need to change anything.
var _resize_scheduler = function () {

    _resize_is_busy = true;
    _resize_scheduled = false;

    setTimeout(function () {

        _resize_is_busy = false;

        if (_resize_scheduled) 
            _handle_resize();

    }, _resize_precision);

    _handle_resize();
}

var _handle_resize = function () {

    console.log('DOING ACTUAL RESIZE');

    // do the work here
    //...
}

我希望这会有所帮助。