window.resize in jquery firing multiple times

问题

I have the following javascript/jquery code in an HTML file:

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

It appears relatively straight forward, however when I re size the browser window, I get two successive alert windows on Chrome and IE9 and I seemingly crash FF5.

What am I missing? Is it one fire per dimension (x/y)?

回答1:

You got it, some browsers fire on resize start and again on end while others like FF fire continuously. Solution is to use setTimeout to avoid firing all the time. An example can be found here. Here is the code from the same reference:

(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:

here's a simple example, if the user stops resizing for 500ms (half a second) you function will fire. the clearTimeout prevents the constant refire of your function. you can adjust this value as you see fit. 500ms may be too soon, you might bump it to 1000, depends on what you are doing inside the function

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

回答3:

Seems like this is a browser-specific quirk. According to the documentation for the resize event:

Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).

(emphasis mine)

A workaround would be to set a timer and check to see if the dimensions of the window have changed.

回答4:

Browsers don't fire the resize event consistently. To avoid it firing constantly, usually a setTimeout is used. Here's some more on that:

JQuery: How to call RESIZE event only once it's FINISHED resizing?

JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

来源：https://stackoverflow.com/questions/6658517/window-resize-in-jquery-firing-multiple-times

标签

javascript

jquery

javascript-events