DOM事件的onResize(DOM onresize event)

如果我有这样的

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

我的函数被整个调整大小解雇多次，但我想捕捉的大小调整的完成 。 这是IE浏览器。

有任何想法吗？ 有各种各样的想法在那里，但不是为我工作至今（例如IE的应该window.onresizeend事件。）

Answer 1:

在这种情况下，我会强烈建议去抖动。 最简单，有效，可靠的方式在JavaScript可以做到这一点，我发现是本Alman的jQuery插件，油门/防抖动 （可带或不带jQuery的使用-我知道......听起来很奇怪）。

随着反跳，代码来执行这将是简单的：

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

希望可以帮助别人。 ;）

Answer 2:

当我想调整后，做一些我一直用这个。 到通话setTimeout和clearTimeout不是对大小调整的速度，任何noticable影响，所以它不是一个，这些都是多次调用问题。

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

Answer 4:

你得到的多个事件，因为真的有多个事件。 窗口动画做几次，你拖动窗口调整大小（默认情况下，您可以在注册表中，我认为改变它）。

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

Answer 5:

不知道这是否会帮助，但因为它似乎是完美的工作，在这儿呢。 我从以前的帖子所采取的片段，并稍加修改它。 功能doCenter（）首先转换至PX EM和比substracts对象的宽度，并且将通过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);
};

Answer 6:

简单纯javascript溶液，只是改变1000 int值更多的响应性较低

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

Answer 7:

我喜欢皮姆雅格优雅的解决方案，但我认为有在最后一个额外的括号，我认为这也许是setTimeout的应该是“超时= setTimeout的（FUNC，100）;”

下面是使用道场我的版本（假设一个函数定义了一个名为demo_resize（））...

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

注：在我的版本是所需的尾随括号。

文章来源: DOM onresize event