How to wait for the 'end' of 'resize' event and only then perform an action?

Question

So I currently use something like:

$(window).resize(function(){resizedw();});

But this gets called many times while resizing process goes o

Answer 1

ResizeStart and ResizeEnd events for window

http://jsfiddle.net/04fLy8t4/

I implemented function which trig two events on user DOM element:

1. resizestart
2. resizeend

Code:

var resizeEventsTrigger = (function () {
    function triggerResizeStart($el) {
        $el.trigger('resizestart');
        isStart = !isStart;
    }

    function triggerResizeEnd($el) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function () {
            $el.trigger('resizeend');
            isStart = !isStart;
        }, delay);
    }

    var isStart = true;
    var delay = 200;
    var timeoutId;

    return function ($el) {
        isStart ? triggerResizeStart($el) : triggerResizeEnd($el);
    };

})();

$("#my").on('resizestart', function () {
    console.log('resize start');
});
$("#my").on('resizeend', function () {
    console.log('resize end');
});

window.onresize = function () {
    resizeEventsTrigger( $("#my") );
};