我使用JQuery这样:
$(window).resize(function() { ... });
但是,如果用户通过拖动窗口边缘来手动调整浏览器窗口的大小,上面的.resize事件会触发多次。
问题:如何在浏览器窗口调整大小完成后调用函数(使事件只触发一次)?
我使用JQuery这样:
$(window).resize(function() { ... });
但是,如果用户通过拖动窗口边缘来手动调整浏览器窗口的大小,上面的.resize事件会触发多次。
问题:如何在浏览器窗口调整大小完成后调用函数(使事件只触发一次)?
当前回答
许多解决方案。我尝试在mouuseevent之后执行事件,所以我在ouse进入窗口后添加了重载:
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
});
其他回答
这是我实现的:
$(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));
非常感谢大卫沃尔什,这里是一个香草版本的下划线debounce。
代码:
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
简单的用法:
var myEfficientFn = debounce(function() {
// All the taxing stuff you do
}, 250);
$(window).on('resize', myEfficientFn);
裁判:http://davidwalsh.name/javascript-debounce-function
我使用以下函数来延迟重复操作,它将适用于您的情况:
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
用法:
$(window).resize(function() {
delay(function(){
alert('Resize...');
//...
}, 500);
});
传递给它的回调函数,只会在指定的时间量之后执行最后一次调用延迟,否则计时器将被重置,我发现这对于其他目的很有用,如检测用户何时停止输入等…