JavaScript/JQuery：$(窗口)。调整大小如何在调整大小完成后触发？

Question

JavaScript/JQuery：$(窗口)。调整大小如何在调整大小完成后触发？

我使用这样的JQuery：

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

但是，如果该人通过拖动窗口边缘使其更大/更小来手动调整浏览器窗口的大小，则.resize事件多次触发。

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

Answer 1

我使用以下函数来延迟重复操作，它将适用于您的情况：var delay = (function(){   var timer = 0;   return function(callback, ms){     clearTimeout (timer);     timer = setTimeout(callback, ms);   };})();用法：$(window).resize(function() {     delay(function(){       alert('Resize...');       //...     }, 500);});传递给它的回调函数，只有在最后一次延迟调用在指定的时间之后才会执行，否则计时器会被重置，我发现这对于检测用户停止键入的时间等其他用途很有用。

Answer 2

我更喜欢创建一个活动：$(window).bind('resizeEnd', function() {     //do something, window hasn't changed size in 500ms});下面是您如何创建它的方法： $(window).resize(function() {         if(this.resizeTO) clearTimeout(this.resizeTO);         this.resizeTO = setTimeout(function() {             $(this).trigger('resizeEnd');         }, 500);     });您可以将其放在全局javascript文件中。