JavaScript/JQuery: $(window).resize如何在调整大小完成后触发？

Question

JavaScript/JQuery: $(window).resize如何在调整大小完成后触发？

250

我正在使用 JQuery，如下所示:

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

然而，如果用户通过拖动窗口边缘手动调整浏览器窗口的大小，则上述.resize事件会多次触发。

问题：如何在浏览器窗口调整大小完成后调用函数（以便事件仅触发一次）？

- sarah

请参考此答案：https://dev59.com/FXRB5IYBdhLWcg3wSVm1#668185。它涉及使用超时来延迟执行您的函数。 - Alastair Pitts

我不确定是否可能，但你可以尝试使用这个插件：http://benalman.com/projects/jquery-resize-plugin/ - BrunoLM

顺便提一下，我注意到这在移动浏览器上非常有用，因为当用户向下滚动时，地址栏往往会逐渐隐藏，从而调整屏幕大小。我还以为只有在桌面上才会发生屏幕调整大小... - MakisH

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- onur · Answer 1

假设在窗口调整大小后，鼠标指针应该返回到文档中，我们可以使用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);
});

- user3432605 · Answer 2

许多解决方案。我尝试在鼠标事件之后执行事件，所以我在鼠标进入窗口后添加了重新加载代码。

jQuery(window).resize(function() {
        // this. is window
        if(  this.resizeTO) {
            clearTimeout(this.resizeTO) 
        };
    
         this.resizeTO = setTimeout(function() {
            
                jQuery(window).mouseenter(function() {
                    if( jQuery(window).width() < 700 &&   jQuery(window).width() > 400 ){
                        console.log("mouseenter  reloads elements"); 
                        // is loading the page  
                        location.reload();
                        //
                     }; // just mobile
                }); // mouse  fired    
        }, 400);  // set Time Ouuut
});

- Aakash · Answer 3

这是我实现的内容： $(window).resize(function(){ setTimeout(someFunction, 500); });

如果我们预计调整大小的时间小于500ms，我们可以清除setTimeout。

祝好运...