当 JQuery 中的 resize() 时，触发器会多次触发

发布于 2024-12-10 15:09:21 字数 2155 浏览 0 评论 0原文

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

            });

原文

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

            });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜心 2024-12-17 15:09:21

发生这种情况是因为当您调整大小时，调整大小事件会多次触发。理论上（更多用于说明目的）当 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
}

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

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.

You can do something like this:

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)

回复收藏 0 原文