fire a function after window resize

Question

I'm doing a few functions on $(window).resize(). One of the functions inside it, is a complex animation with lots of divs.

$window.resize(function() {
    // some functions
    doAnim();
}

the problem here is, that the resize() function triggers a lot. Is it possible to fire one function after the resize() is finished, that it doesnt fire a hundred times?

Cheers

@SpiderCode yes but after the resize is finished, so that after the mouse is released! — supersize, Nov 07 '13 at 12:14
This has been asked numerous times before: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed — Hein Haraldson Berg, Nov 07 '13 at 12:14
http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing — Forivin, Nov 07 '13 at 12:15
http://benalman.com/projects/jquery-throttle-debounce-plugin/ — Andreas, Nov 07 '13 at 12:18

score 2 · Accepted Answer · answered Nov 07 '13 at 12:19

So, I believe this is a similar scenario when a user "type" something: you can't know when the user finished to compose a sentence, the same here, you don't know when the user has finished to resize; so what you can do is have an acceptable interval:

var idt;
$(window).resize(function() {
    if (idt) clearTimeout(idt);
    idt = setTimeout(doAnim, 500);
}

You can also use a closure to avoid to pollute the global scope with idt variable.

However the main point here is that every time the user resize the window, it set a timeout and clear the previous one: the doAnim function will be executed only if the user leave the window without resizing it for half second. Of course you can set your own delay.

SpiderCode · Answer 2 · 2013-11-07T13:52:44.373

You can achieve it as shown below. This will call when you finish with resizing :

        var myTimer;
        $(window).resize(function() 
        {
            // some functions
            var interval = 500;
            clearInterval(myTimer);
            myTimer = setInterval(function () { doAnim(); }, interval);
        });

        function doAnim() 
        {
            clearInterval(myTimer);
            alert('Resized');
        }

fire a function after window resize

2 Answers2

Linked