23

如果我有这个

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

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

有任何想法吗？那里有各种各样的想法，但到目前为止对我没有用（例如 IE 的假定 window.onresizeend 事件。）

4

7 回答 7

31

在这种情况下，我强烈建议去抖动。我发现在 JavaScript 中执行此操作的最简单、有效和可靠的方法是Ben Alman 的 jQuery 插件 Throttle/Debounce（可以使用或不使用 jQuery - 我知道......听起来很奇怪）。

使用去抖动，执行此操作的代码将非常简单：

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

希望可以帮助某人。;)

于 2010-05-20T13:48:32.950 回答
9

当我想在调整大小后做某事时，我总是使用它。setTimeout对和的调用对clearTimeout调整大小的速度没有任何明显影响，因此多次调用它们不是问题。

var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
   if(timeOut != null) clearTimeout(timeOut);
   timeOut = setTimeout(func, 100);
}
于 2010-05-20T13:56:43.710 回答
5

这并不完美，但它应该为您提供所需的开始。

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();
}
于 2009-09-30T20:34:42.037 回答
4

您会收到多个事件，因为确实有多个事件。Windows 会在您拖动窗口时多次执行调整大小的动画（默认情况下，我认为您可以在注册表中更改它）。

你可以做的是增加延迟。每次 IE 事件触发时执行 clearTimeout, setTimout(myResize,1000)。然后，只有最后一个会进行实际的调整大小。

于 2009-09-30T19:58:56.250 回答
2

简单的纯 javascript 解决方案，只需将 1000 int 值更改为更低以获得更高的响应性

        var resizing = false;
        window.onresize = function() {
            if(resizing) return;
            console.log("resize");
            resizing = true;
            setTimeout(function() {resizing = false;}, 1000);
        };
于 2013-05-21T07:46:02.490 回答
1

不确定这是否有帮助，但由于它似乎工作得很好，就在这里。我从上一篇文章中摘录了片段并稍作修改。函数 doCenter() 首先将 px 转换为 em，然后减去对象的宽度并将余数除以 2。结果分配为左边距。执行 doCenter() 以使对象居中。再次执行 doCenter() 调整窗口大小时会触发超时。

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);
};
于 2012-03-12T03:58:23.060 回答
0

我喜欢 Pim Jager 的优雅解决方案，尽管我认为最后有一个额外的括号，我认为 setTimeout 可能应该是“timeOut = setTimeout(func,100);”

这是我使用 Dojo 的版本（假设定义了一个名为 demo_resize() 的函数）...

var _semaphorRS = null;
dojo.connect(window,"resize",function(){
 if (_semaphorRS != null) clearTimeout(_semaphorRS);
 _semaphorRS = setTimeout(demo_resize, 500);
 });

注意：在我的版本中，需要尾随括号。

于 2011-07-06T12:58:14.730 回答