window.resize в JQuery запускается несколько раз - PullRequest
11 голосов
/ 12 июля 2011

У меня есть следующий код javascript / jquery в файле HTML:

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js" 
     type="text/javascript"></script>
    <script language="javascript">
    $(window).resize(function(){alert('hi');});</script>
  </head>
  <body>
    resize me
  </body>
</html>

Это выглядит относительно прямым, однако, когда я изменяю размер окна браузера, я получаю два последовательных окна предупреждений в Chrome и IE9 и, по-видимому, выхожу из строя FF5.

Чего мне не хватает? Это один огонь на измерение (х / у)

Ответы [ 4 ]

26 голосов
/ 12 июля 2011

Вы поняли, некоторые браузеры запускаются при изменении размера начала и снова в конце, в то время как другие, такие как FF, работают непрерывно. Решение состоит в том, чтобы использовать setTimeout, чтобы избежать постоянной стрельбы. Пример можно найти здесь . Вот код из той же ссылки:

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null; 
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100); 
      };
  }
    // smartresize 
    jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){  
  // code that takes it easy...
});
8 голосов
/ 12 июля 2011

Вот простой пример: если пользователь прекратит изменение размера на 500 мс (полсекунды), ваша функция сработает.clearTimeout предотвращает постоянное обновление вашей функции.Вы можете настроить это значение по своему усмотрению.500 мс может быть слишком рано, вы можете увеличить его до 1000, в зависимости от того, что вы делаете внутри функции

var resizeTimeout;
$(window).resize(function(){
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function(){    
        alert('your function to run on resize');
    }, 500);
});
4 голосов
/ 12 июля 2011

Браузеры не запускают событие изменения размера последовательно. Чтобы избежать непрерывного запуска, обычно используется setTimeout. Вот еще немного об этом:

JQuery: как вызвать событие RESIZE только после его изменения?

JavaScript / JQuery: $ (окно). Изменить размер, как запустить ПОСЛЕ изменения размера завершено?

4 голосов
/ 12 июля 2011

Похоже, это специфическая особенность браузера.В соответствии с документацией для события resize:

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

(выделено мной)

Обходной путь может заключаться в установке таймера и проверке, соответствуют ли размерыокно изменилось.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...