DOM onresize事件

Question

如果我有这个

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

在整个调整大小的过程中，我的函数会被多次触发，但我希望捕获调整大小的完成情况。这是在IE里。

有什么想法吗？有各种各样的想法，但到目前为止还没有对我起作用(例如IE的假定window.onresizeend事件)。

Answer 1

在这种情况下，我会强烈地支持的建议。在JavaScript中，我发现最简单、最有效和最可靠的方法是本·阿尔曼的jQuery插件，Throttle/De弹跳 (可以和jQuery一起使用，也可以不用jQuery-我知道.听起来很奇怪)。

通过删除，执行此操作的代码将非常简单，如：

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

希望能帮上忙。;)

Answer 2

我总是使用这个，当我想做一些事情后，调整大小。对setTimeout和clearTimeout的调用对调整大小的速度没有任何明显的影响，因此这些调用多次被调用并不是一个问题。

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

Answer 3

这是，不是完美的，但它应该给您提供您需要的开始。

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();
}