我使用JQuery这样:
$(window).resize(function() { ... });
但是，如果用户通过拖动窗口边缘来手动调整浏览器窗口的大小，上面的.resize事件会触发多次。
问题:如何在浏览器窗口调整大小完成后调用函数(使事件只触发一次)?
当前回答
实际上，据我所知，当resize关闭时，您不能准确地执行某些操作，因为您不知道未来用户的操作。但是您可以假设两次调整大小事件之间的时间间隔，因此如果您等待的时间比这个时间稍长，并且没有进行调整大小，则可以调用您的函数。 我们使用setTimeout和它的id来保存或删除它。例如，我们知道两次调整大小事件之间的时间是500ms，因此我们将等待750ms。
var; $(窗口).resize(函数(){ clearTimeout(一个); a = setTimeout(函数(){ //调用函数 }, 750); });
其他回答
声明全局延迟侦听器:
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);
});
});
这是我实现的:
$（window）.resize（function（）{ setTimeout（someFunction， 500）; });
如果我们期望resize发生的时间小于500ms，我们可以清除setTimeout
祝你好运…
我喜欢创建一个事件:
$(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文件中。
如果你安装了Underscore.js，你可以:
$(window).resize(_.debounce(function(){
alert("Resized");
},500));
