Question

我使用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();
         });  

            });

Answer 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
}

这应该安全地忽略多个火灾并且只处理最后一个火灾。（除非你花很多时间调整大小，否则你可以增加超时）

Answer 2

这是一段很好的代码，可以为您处理：

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

另见：

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

当在JQuery中调整resize（）时，触发器会多次触发

2 个答案: