DOM onresize event

Question

If I have this

window.onresize = function() {
  alert(\'resized!!\');
};

My function gets fired multiple times throughout the res

Answer 1

I always use this when I want to do something after resizing. The calls to setTimeout and clearTimeout are not of any noticable impact on the speed of the resizing, so it's not a problem that these are called multiple times.

var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
   if(timeOut != null) clearTimeout(timeOut);
   timeOut = setTimeout(func, 100);
}

Answer 2

You get multiple events because there really are multiple events. Windows animates the resize by doing it several times as you drag the window (by default, you can change it in the registry I think).

What you could do is add a delay. Do a clearTimeout, setTimout(myResize,1000) every time the IE event fires. Then, only the last one will do the actual resize.

Answer 3

In this case, I would strongly suggest debouncing. The most simple, effective, and reliable way to do this in JavaScript that I've found is Ben Alman's jQuery plugin, Throttle/Debounce (can be used with or without jQuery - I know... sounds odd).

With debouncing, the code to do this would be as simple as:

$(window).resize($.debounce(1000, function() {
   // Handle your resize only once total, after a one second calm.
   ...
}));

Hope that can help someone. ;)

Answer 4

simple pure javascript solution, just change the 1000 int value to be lower for more responsiveness

        var resizing = false;
        window.onresize = function() {
            if(resizing) return;
            console.log("resize");
            resizing = true;
            setTimeout(function() {resizing = false;}, 1000);
        };

Answer 5

This is not perfect but it should give you the start you need.

var initialX = null;
var initialY = null;
var lastResize = null;
var waiting = false;
var first = true;
var id = 0;

function updateResizeTime()
{
    if (initialX === event.clientX && initialY === event.clientY)
    {
        return;
    }

    initialX = event.clientX;
    initialY = event.clientY;

    if (first)
    {
        first = false;
        return;
    }

    lastResize = new Date();            
    if (!waiting && id == 0)
    {
        waiting = true;
        id = setInterval(checkForResizeEnd, 1000);
    }
}

function checkForResizeEnd()
{
    if ((new Date()).getTime() - lastResize.getTime() >= 1000)
    {
        waiting = false;
        clearInterval(id);
        id = 0;
        alert('hey!');
    }
}

window.onresize = function()
{
    updateResizeTime();
}

Answer 6

Not sure if this might help, but since it seems to be working perfectly, here it is. I have taken the snippet from the previous post and modified it slightly. The function doCenter() first translates px to em and than substracts the width of the object and divides the remainder by 2. The result is assigned as left margin. doCenter() is executed to center the object. timeout fires when the window is resized executing doCenter() again.

function doCenter() {
document.getElementById("menuWrapper").style.position = "fixed";
var getEM = (window.innerWidth * 0.063);
document.getElementById("menuWrapper").style.left = (getEM - 40) / 2 + "em";
}

doCenter();

var timeOut = null;
var func = function() {doCenter()};
window.onresize = function(){
    if (timeOut != null) clearTimeout(timeOut);
    timeOut = setTimeout(func, 100);
};