降低JavaScript事件民意调查的频率

Question

您如何降低JavaScript事件投票的频率？我担心的事件是 占用 和 滚动. 。当某人分别调整浏览器或滚动滚动时，这些事件每秒可能会触发数十次。我希望这些事件仅每500毫秒一次发生一次，因此我不必花几个小时来优化我的活动处理程序，并确保它们不会泄漏内存。

Answer 1

var resizeTimeout;

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

});

这将触发 setTimeout() 该人完成调整大小后的功能〜500ms。

这 onscroll 版本非常相似:)

Answer 2

您无法真正控制活动的频率，您可以做一些事情，例如记住第一次事件的射击时间，然后在每个结果中，您检查一下第一个事件是否超过500毫秒 - 如果是，则继续进行活动处理程序，否则您只需退出活动Hander

Answer 3

在处理程序的开头，检查以来是否已经过去500ms，只需返回即可。

Answer 4

您不能阻止这些事件发射。他们总是这样。您要做的是立即停止聆听，然后处理事件以避免重复。然后在Settimeout之后再次设置整个处理程序。除非有人调整窗口，否则不再发生递归。我在这里使用5000毫秒，因为在控制台中可以看到它可以使用。即使您像SPAZ一样调整大小，也不应该在FF控制台中看到一次以上的垃圾邮件。

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

使用Logic来决定是否每次操作员开火时仍在技术射击处理程序和IF语句 +查找时都要做任何事情。那会变得沉重。

Answer 5

检查下划线 调试 功能

创建并返回一个已通过功能的新版本的拒绝版本，该版本将推迟其执行，直到自上次调用以来，等待毫秒就已经过去了。对于仅在输入停止到达后才能实现的行为有用。例如：呈现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
    //...
}

我希望这将有所帮助。