При изменении размера () в jQuery триггер срабатывает несколько раз

#jquery #resize

#jquery #изменение размера

Вопрос:

Я использую Paul Irish Smartresize, но когда я изменяю размер окна, функция внутри resize() срабатывает несколько раз, в результате чего мой аккордеон не работает должным образом. У кого-нибудь есть идеи, почему это происходит? Вот запущенный код: http://jsfiddle.net/rebel2000/PnAH7/6 /

           $(document).ready( function(){


            (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'); 

           function anim3() {
                $('#button').click(
                    function(){
                        if($(this).hasClass('active')){
                            $(this).animate({ "height": "30px"}, { queue:true, duration: 900 });
                            $(this).removeClass('active');
                            return false;
                        } else {                

                            $(this).animate({ "height": "100px"}, { queue:true, duration: 900  });
                            $(this).addClass('active');
                            return false;
                        }
                    }
                );                    
            }
         //anim3();
         $(window).smartresize(function(){
             anim3();
         });  

            });

Ответ №1:

Это происходит потому, что при изменении размера событие изменения размера срабатывает несколько раз. Теоретически (больше для иллюстрации), когда цикл JavaScript проходит проверку размера окна, он обнаруживает, что он меньше / больше, чем раньше, и запускает его снова. Поскольку цикл выполняется очень быстро, вы получаете несколько срабатываний во время вашего «одиночного» изменения размера.

Вы можете сделать что-то вроде этого:

 var idCounter = 0;
$(window).smartresize(function(){
  var myId=(  idCounter);
  setTimeout(function(){
    if(myId===idCounter){
       anim3();
    }
  }, 500); // 500 milli the user most likely wont even notice it
}

Это должно безопасно игнорировать множественные срабатывания и обрабатывать только последний. (Если вы не тратите много времени на изменение размера, в этом случае вы можете увеличить время ожидания)

1. Спасибо за код, он работает просто отлично, но я понял, что у меня другая проблема… Если я изменяю размер окна только один раз, тогда код в порядке, но когда я изменяю размер окна несколько раз, функция вызывается несколько раз. У вас есть какие-либо идеи по этому поводу? Вы можете увидеть его в действии по следующей ссылке jsfiddle.net/rebel2000/PnAH7/6

2. Наконец-то я заработал, мне нужен был флаг, чтобы моя функция запускалась только один раз. jsfiddle.net/rebel2000/jwyeC

Ответ №2:

Вот отличный фрагмент кода, который обрабатывает это за вас :

http://benalman.com/projects/jquery-throttle-debounce-plugin/

Также смотрите:

http://benalman.com/projects/jquery-dotimeout-plugin/