Опустите частоту опроса событий JavaScript

Question

Как вы снижаете частоту опроса событий JavaScript? События, которые я обеспокоен onresize. и onscroll.. Отказ Эти события могут быть вызваны десятками раз в секунду, когда кто-то размещает их браузер или прокручивать, соответственно. Я хотел бы, чтобы эти события произошли только один раз каждые 500 мс, поэтому мне не нужно проводить часы, оптимизирующие мои обработчики событий и убедившись, что они не утечки памяти.

Answer 1

var resizeTimeout;

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

});

Это выздоровеет setTimeout() Функция ~ 500 мс после того, как человек закончил изменение размера.

То onscroll Версия очень похожа :)

Answer 2

Вы не можете действительно контролировать, как часто события срабатывают, вы можете сделать что-то вроде запомнить время первого события стрельбы, затем на каждом следующем, который вы проверяете, является ли это более 500 мс от первого - если да, вы действуете с событием обработчик, в противном случае вы просто выходите из события Hanlder

Answer 3

В начале вашего обработчика проверьте, прошел ли 500 мс после последнего и просто вернитесь, если нет.

Answer 4

Вы не можете помешать этим событиям от стрельбы. Они всегда делают. То, что вы хотите сделать, это немедленно прекратить прослушивание, а затем обрабатывать событие, чтобы избежать повторения. Затем весь обработчик снова устанавливается после посещения. Больше не происходит рекурсия, если кто-то не изменит не разместит размер окна. Я использую 5000 мс здесь, так как легче видеть, что он работает в консоли. Вы не должны видеть более одного спама в консоли FF каждые 5 секунд, даже если вы разместите, как SPAZ.

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

Используя логику, чтобы решить, следует ли сделать что-нибудь каждый раз, когда Handler Firees по-прежнему технически уволен обработчиком и оператором IF + Lookup. Это может быть тяжело.

Answer 5

Проверьте подчеркивание отдохнуть функция

Создает и возвращает новую распакованную версию прошедшей функции, которая отложит его выполнение до тех пор, пока после того, как ожидание миллисекунды, поскольку в последний раз он был вызван. Полезно для реализации поведения, которое должно происходить только после того, как вход перестал прибыть. Например: рендуринг предварительного просмотра комментариев reckdown, пересчитывая макет после того, как окно остановилось, и так далее.

Пример:

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
    //...
}

Я надеюсь, это поможет.