当在JQuery中使用resize()时，触发器会触发多次 [英] When resize() in JQuery, trigger fires multiple times

问题描述

我使用Paul Irish Smartresize，但是当我调整窗口大小时，resize()内部的函数会多次触发，导致我的手风琴无法正常工作. 有谁知道为什么会这样吗? 这是运行的代码: http://jsfiddle.net/rebel2000/PnAH7/6/

I use Paul Irish Smartresize but when I resize the window the function inside resize() fires multiple times causing my accordion not to work properly. Does anyone have any idea why this happens? Here is the code running: 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();
         });  

            });

推荐答案

之所以会发生这种情况，是因为调整大小时，重新调整大小事件会触发多次.通常，JavaScript循环经过窗口大小验证后，会检测到它比以前小/大，然后再次将其触发.由于循环非常快，因此在单次"调整大小时会发生多次射击.

That happens because when you are re-sizing, the re-size event fires multiple times. Teorically(more for illustration purposes) when the JavaScript loop goes through the verification of the window size it detects it is smaller/larger than before and fires it again. As the loop is very fast you get multiple fires, during your "single" re-size.

您可以执行以下操作:

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
}

这应该安全地忽略多次火灾，仅对最后一次火灾进行处理. (除非您花大量时间调整大小，否则可以增加超时时间)

This should safely ignore the multiple fires and only process on the last one. (Unless you take lots of time to resize, in that case you can increase the timeout)

这篇关于当在JQuery中使用resize()时，触发器会触发多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！