Question

how do i write a function that detects and caches the start and the end of a window.width resize

the width in the the .resize(funciton{}) changes instantly when resizing, but I’m after the differences between the old and new size every time it resizes.

update—

I Need to catch the diffeence so that I can do a width: ‘+=diff’ to an element

Answer 1

This version will update the last window size after 500 milliseconds (demo). And yes, some browsers update the window width only after the resize has stopped, others will actively update while you drag the window.

var throttle,
    win = $(window),
    cur_width = win.width(),
    old_width = cur_width,
    diff = 0;

win.resize(function() {
    clearTimeout(throttle);
    cur_width = win.width();
    throttle = setTimeout(function() {
        diff = cur_width - old_width;
        old_width = cur_width;
    }, 500);
}).trigger('resize');