浏览器窗口完成调整大小后如何调用函数？
我正在尝试这样做，但遇到了问题。我正在使用 JQuery Resize 事件函数：
$(window).resize(function() {
... // how to call only once the browser has FINISHED resizing?
});
但是，如果用户手动调整浏览器窗口的大小，则连续调用此函数。也就是说，它可能会在很短的时间内调用这个函数几十次。
我怎样才能只调用一次调整大小函数一次（一旦浏览器窗口完成调整大小）？
更新
也不必使用全局变量。
【问题讨论】：
标签： javascript jquery html
Here is an example using thejh's instructions
您可以将参考 id 存储到任何 setInterval 或 setTimeout。像这样：
var loop = setInterval(func, 30);
// some time later clear the interval
clearInterval(loop);
【讨论】：
function debouncer( func , timeout ) {
var timeoutID , timeout = timeout || 200;
return function () {
var scope = this , args = arguments;
clearTimeout( timeoutID );
timeoutID = setTimeout( function () {
func.apply( scope , Array.prototype.slice.call( args ) );
} , timeout );
}
}
$( window ).resize( debouncer( function ( e ) {
// do stuff
} ) );
注意，您可以将此方法用于任何您想要去抖动的东西（关键事件等）。
调整超时参数以获得最佳预期效果。
【讨论】：
func，内部this指针指向scope，Array.prototype.slice.call(args)（从args生成标准数组）为论据
您可以将setTimeout() 和clearTimeout() 与jQuery.data 结合使用：
$(window).resize(function() {
clearTimeout($.data(this, 'resizeTimer'));
$.data(this, 'resizeTimer', setTimeout(function() {
//do something
alert("Haven't resized in 200ms!");
}, 200));
});
更新
我写了一个扩展来增强jQuery的默认on(&bind)-event-handler。如果在给定的时间间隔内未触发事件，它会将一个或多个事件的事件处理函数附加到所选元素。如果您只想在延迟后触发回调，这很有用，例如调整大小事件，或者其他。
https://github.com/yckart/jquery.unevent.js
;(function ($) {
var methods = { on: $.fn.on, bind: $.fn.bind };
$.each(methods, function(k){
$.fn[k] = function () {
var args = [].slice.call(arguments),
delay = args.pop(),
fn = args.pop(),
timer;
args.push(function () {
var self = this,
arg = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(self, [].slice.call(arg));
}, delay);
});
return methods[k].apply(this, isNaN(delay) ? arguments : args);
};
});
}(jQuery));
像任何其他 on 或 bind-event 处理程序一样使用它，除了你可以传递一个额外的参数作为最后一个：
$(window).on('resize', function(e) {
console.log(e.type + '-event was 200ms not triggered');
}, 200);
【讨论】：
var lightbox_resize = false;
$(window).resize(function() {
console.log(true);
if (lightbox_resize)
clearTimeout(lightbox_resize);
lightbox_resize = setTimeout(function() {
console.log('resize');
}, 500);
});
【讨论】：
补充一下，由于滚动条弹出和弹出，通常会收到不需要的调整大小事件，这里有一些代码可以避免这种情况：
function registerResize(f) {
$(window).resize(function() {
clearTimeout(this.resizeTimeout);
this.resizeTimeout = setTimeout(function() {
var oldOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden";
var currHeight = $(window).height(),
currWidth = $(window).width();
document.body.style.overflow = oldOverflow;
var prevUndefined = (typeof this.prevHeight === 'undefined' || typeof this.prevWidth === 'undefined');
if (prevUndefined || this.prevHeight !== currHeight || this.prevWidth !== currWidth) {
//console.log('Window size ' + (prevUndefined ? '' : this.prevHeight + "," + this.prevWidth) + " -> " + currHeight + "," + currWidth);
this.prevHeight = currHeight;
this.prevWidth = currWidth;
f(currHeight, currWidth);
}
}, 200);
});
$(window).resize(); // initialize
}
registerResize(function(height, width) {
// this will be called only once per resize regardless of scrollbars changes
});
【讨论】：
Underscore.js 有几个很好的方法来完成这个任务：throttle 和 debounce。即使您不使用下划线，也请查看这些函数的来源。这是一个例子：
var redraw = function() {'redraw logic here'};
var debouncedRedraw = _.debounce(redraw, 750);
$(window).on('resize', debouncedRedraw);
【讨论】：
这是我的方法：
document.addEventListener('DOMContentLoaded', function(){
var tos = {};
var idi = 0;
var fn = function(id)
{
var len = Object.keys(tos).length;
if(len == 0)
return;
to = tos[id];
delete tos[id];
if(len-1 == 0)
console.log('Resize finished trigger');
};
window.addEventListener('resize', function(){
idi++;
var id = 'id-'+idi;
tos[id] = window.setTimeout(function(){fn(id)}, 500);
});
});
resize-event-listener 捕获所有传入的 resize 调用，为每个调用创建一个超时函数，并将超时标识符与 'id-' 前面的迭代数字一起保存在 @987654323 中（可用作数组键） @-数组。
每次触发 timout 时，它都会调用 fn 函数，该函数会检查是否是 tos 数组中的最后一次超时（fn 函数会删除每个执行的 timout）。如果为 true (= if(len-1 == 0))，则调整大小完成。
【讨论】：
jQuery 提供了一个off 方法来移除事件处理程序
$(window).resize(function(){
if(magic == true) {
$(window).off('resize', arguments.callee);
}
});
【讨论】：