您可以将
setTimeout()
和
clearTimeout()
与
jQuery.data
结合使用:
$(window).resize(function() {
clearTimeout($.data(this, 'resizeTimer'));
$.data(this, 'resizeTimer', setTimeout(function() {
alert("Haven't resized in 200ms!");
}, 200));
});
更新
我编写了一个扩展程序,以增强jQuery的默认on
(和bind
)事件处理程序。如果给定时间间隔内未触发事件,则它会为所选元素附加一个或多个事件处理程序函数。这在您想要延迟一段时间后再执行回调的情况下非常有用,例如调整大小事件等。
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
事件处理程序一样使用它,除了您可以作为最后一个传递额外的参数:
$(window).on('resize', function(e) {
console.log(e.type + '-event was 200ms not triggered');
}, 200);
http://jsfiddle.net/ARTsinn/EqqHx/