window.resize in jQuery firing multiple times

Question

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 straightforward, however when I resize the browser window, I get two successive alert windows on Chrome and IE9 and I seemingly crash Firefox5.

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

Yeah, I just clicked the max-restore button in the window handle. It also fired twice at that point. — Matt, Jul 12 '11 at 01:22
If you want to avoid this, have a look at this plugin: http://benalman.com/projects/jquery-throttle-debounce-plugin/ — Felix Kling, Jul 12 '11 at 01:22

Radu · Accepted Answer · 2012-12-07T19:47:49.617

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

Thanks this answer helped solve my problem: http://stackoverflow.com/questions/13710834/problems-with-mobiscroll-orientationchange-and-access-address-bar-crashes-some/13767875#13767875 — Soenhay, Dec 07 '12 at 17:18

score 12 · Answer 2 · edited Apr 21 '15 at 08:43

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

score 4 · Answer 3 · answered Jul 12 '11 at 01:20

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.

score 4 · Answer 4 · edited May 23 '17 at 10:31

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?

edited May 23 '17 at 10:31

Community

1
1

answered Jul 12 '11 at 01:23

DSKrepps

641
1
7
15

window.resize in jQuery firing multiple times

4 Answers4

Linked