Question

On jQuery resize event page it is said that:

“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
Firefox).”

Right now I observe increasing memory leak in my app, as I’m continuously resizing browser window, which in it’s turn continuously triggers specific code. I thought resize event is called only once in the end of the resize operation, but now after reading this I think my code is simply overkilling itself.

Is there any established practice to trigger a callback cross-browser only once, when resize operation has already ended?

Answer 1

As you are using jQuery anyway, have a look at Ben Alman’s doTimeout plugin. You can use it to debounce your event handler.

There is even an example that matches exactly your case:

$(window).resize(function(){
  $.doTimeout( 'resize', 250, function(){
    // do something computationally expensive
  });
});

The key here is that, the function passed to doTimeout is only executed if the resize handler is not called (i.e. the resize event is not fired) again during the next 250 ms. If so, the timer is aborted and a new one is started.