Loading Gif

How to run a function after window resize using jQuery


How to run a function after window resize using jQuery

The Problem

There are many times when I come across the need to run a javascript function after a user has actually finished resizing the window and not during the resize process. Maybe its a particularly resource heavy function for example, and calling this function in the traditional way using $(window).resize(); will result in the function being called multiple times whilst the user is dragging the window edge around thus causing the browser to freeze up.

Heres what the jQuery website has to say about the function:

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

So what we are trying to achieve here is to mimic the behaviour of Opera across all browsers.

The Solution

Here is a technique which can be used to achieve this goal. It involves using the two functions setTimeout(); and clearTimeout(); and is actually pretty simple.

Heres how the function might look before we modify it.

If you run this in a browser you will most likely get a barrage of alerts (normally too many for the browser to handle). Now sometimes this is the desired effect. If you are trying to match the size of an element to the size of the window for example. But in the case of our resource heavy function we only want to run it once, after we are done resizing.

Here’s how to achieve that.

The way this works is to wrap our function in a setTimeout(); call and then to cancel this call each time the browser calls $(window).resize(); using clearTimeout(); . This means that ultimately our function is only ever called once as the only time it is not cancelled is on the final call of $(window).resize(); .

If you try this code in a browser you should only ever 1 alert unlike the previous example.

To make it your own just replace the javascript alert with a call to your resource heavy function and set the pause variable to however long after the user has finished resizing you want your function to run. If set to 1000 your function will run exactly 1 second after the user has finished resizing. I tend not to go below 500ms just in case the browser manages to slip in a sneaky extra call to my function.

Its also worth noting that you can use this technique on other jQuery and javascript functions that work in a similar way.

For example if you have a similar situation with a resource heavy function and scrolling you can replace all references to $(window).resize(); with $(window).scroll(); to run your function after the user has finished scrolling rather than during.

Anyway I hope someone finds this little snippet of code as useful as I have.