Window.resize при запуске jquery несколько раз

У меня есть следующий код 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.

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

Ответ 1

У вас есть это, некоторые браузеры запускаются при изменении размера и снова в конце, в то время как другие, как огонь 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...
});

Ответ 2

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

var resizeTimeout;
$(window).resize(function(){
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function(){    
        alert('your function to run on resize');
    }, 500);
});

Ответ 3

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

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

(акцент мой)

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

Ответ 4

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

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

JavaScript/JQuery: $(window).resize как стрелять ПОСЛЕ изменения размера?