我使用JQuery这样:

$(window).resize(function() { ... });

但是,如果用户通过拖动窗口边缘来手动调整浏览器窗口的大小,上面的.resize事件会触发多次。

问题:如何在浏览器窗口调整大小完成后调用函数(使事件只触发一次)?


当前回答

前面提到的一些解决方案对我不起作用,尽管它们的用途更广泛。或者,我发现了这一个,在窗口大小调整的工作:

$(window).bind('resize', function(e){
    window.resizeEvt;
    $(window).resize(function(){
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function(){
        //code to do after window is resized
        }, 250);
    });
});

其他回答

声明全局延迟侦听器:

var resize_timeout;

$(window).on('resize orientationchange', function(){
    clearTimeout(resize_timeout);

    resize_timeout = setTimeout(function(){
        $(window).trigger('resized');
    }, 250);
});

下面使用监听器来调整事件大小:

$(window).on('resized', function(){
    console.log('resized');
});

前面提到的一些解决方案对我不起作用,尽管它们的用途更广泛。或者,我发现了这一个,在窗口大小调整的工作:

$(window).bind('resize', function(e){
    window.resizeEvt;
    $(window).resize(function(){
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function(){
        //code to do after window is resized
        }, 250);
    });
});

如果你安装了Underscore.js,你可以:

$(window).resize(_.debounce(function(){
    alert("Resized");
},500));

实际上,据我所知,当resize关闭时,您不能准确地执行某些操作,因为您不知道未来用户的操作。但是您可以假设两次调整大小事件之间的时间间隔,因此如果您等待的时间比这个时间稍长,并且没有进行调整大小,则可以调用您的函数。 我们使用setTimeout和它的id来保存或删除它。例如,我们知道两次调整大小事件之间的时间是500ms,因此我们将等待750ms。

var; $(窗口).resize(函数(){ clearTimeout(一个); a = setTimeout(函数(){ //调用函数 }, 750); });

假设鼠标光标在窗口调整大小后应该返回到文档,我们可以使用onmouseover事件创建一个类似回调的行为。不要忘记,这个解决方案可能不适用于预期的触摸屏。

var resizeTimer;
var resized = false;
$(window).resize(function() {
   clearTimeout(resizeTimer);
   resizeTimer = setTimeout(function() {
       if(!resized) {
           resized = true;
           $(document).mouseover(function() {
               resized = false;
               // do something here
               $(this).unbind("mouseover");
           })
       }
    }, 500);
});