Как вызвать функцию javascript только один раз во время события изменения размера окна?

Question

На jQuery страница события изменения размера говорится, что:

"Код в обработчике изменения размера никогда не должен полагаться на количество вызовов этого обработчика. В зависимости от реализациисобытия изменения размера могут отправляться непрерывно во время изменения размера (типичное поведение в браузерах Internet Explorer и WebKit, таких как Safari и Chrome), или только один раз в конце операции изменения размера (типичное поведение в Firefox)."

Прямо сейчас я наблюдаю увеличение утечки памяти в моем приложении, поскольку я постоянно изменяю размер окна браузера, которое, в свою очередь, постоянно вызывает определенный код.Я думал, что событие resize вызывается только один раз в конце операции изменения размера, но теперь, прочитав это, я думаю, что мой код просто сам по себе перебивает.когда операция изменения размера уже закончилась?

Answer 1

Поскольку вы все равно используете jQuery, взгляните на плагин Бена Алмана doTimeout .Вы можете использовать его для debounce вашего обработчика событий.

Существует даже пример, который точно соответствует вашему случаю :

$(window).resize(function(){
  $.doTimeout( 'resize', 250, function(){
    // do something computationally expensive
  });
});

Ключздесь функция, переданная в doTimeout, выполняется только в том случае, если обработчик изменения размера не вызывается (т.е. событие изменения размера не запускается) снова в течение следующих 250 мс.Если это так, таймер прерывается и запускается новый.

Answer 2

Так что этот ответ, я думаю, лучше всего выполнить, выполнив следующее вместо метода $ .doTimeout (который, похоже, не хочет запускаться внутри другого оператора JQuery:

// create a global timer var:
var _timeVar;

// create your jQuery window resize method. The clearTimeout() method prevents the
$(window).resize(function(){
    clearTimeout( _timerVar );
    _timerVar = setTimeout('resizeUI()', 250);
});

// my resize function
function resizeUI() {
    // resize stuff here
}

Answer 3

Я думаю, это помогло бы, если бы вы показали нам свой обработчик событий изменения размера.

Не видя вашего кода, все, что я могу предложить, - это использовать какую-то черту, чтобы ограничить количество срабатываний обработчика в секунду:

var lastTime = 0;
$(window).resize(function(){
    // This condition will only be met (at most) once every second
    if (lastTime + 1000 < +new Date) {
        // do your stuff...
        lastTime = +new Date;
    }
});

Answer 4

Я получил несколько звонков при запуске Firefox (работает в XUL Addon).Если вы хотите вызывать ваш код только ОДИН РАЗ за время (ошибки, вызванные повторным вызовом кода, когда ваш код уже выполняется), вы можете использовать только триггер (флаг [логическое значение]).

MyClass = {
  is_resizing: false,
  // another variables here...

  resized: function() {
    if (! MyClass.is_resizing) {
      // your code goes here...
    }
  },

  // another methods here...
};

window.addEvenetListener('resize', function(e) { MyClass.resized(); e.stopPropagation(); }, false);

Answer 5

Спасибо за совет, но я не думаю, что он будет работать в браузере, таком как IE или Webkit, который непрерывно генерирует события при изменении размера.И вот почему: допустим, что размер окна не изменялся в течение нескольких секунд, а затем вы изменяете его размер: при первом запущенном событии переменная lastTime будет меньше новой даты, поэтому будет выполнен код для изменения размера.Поскольку другие события запускаются с высокой скоростью при изменении размера, все они не дотягивают до одной секунды и не срабатывают. Конечным результатом является то, что изменение размера не произойдет для конечного размера окна, который мы пытаемся захватить.

Пожалуйста, дайте мне сейчас, если я неправильно понял ваш код, потому что я ищу решение для этого, и я бы хотел избежать использования слишком большого количества таймеров, как в других предлагаемых решениях.

Спасибо.

Answer 6

Вы можете использовать флаг. Установите флаг в начале функции - снимите флажок, если после полного изменения размера. Затем не допускайте повторного вызова функции, пока флаг не был сброшен.