Question

是否可以避免浏览器两次触发事件，但不能基于计时（如果你的resize事件执行持续很长时间，解决方案是坏的）

Answer 1

window.blockResize = false;
$(window).resize(function() {

    if (window.blockResize) return;

        //do stuff


    window.blockResize = true;
    setTimeout(function(){window.blockResize = false},200);


});

好吧，它仍然基于计时器，但它现在适用于我的情况。

Answer 2

您可以将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（＆amp; bind） - 事件处理程序。如果在给定间隔内未触发事件，它会将一个或多个事件的事件处理函数附加到所选元素。如果您只想在延迟之后（例如resize事件）触发回调，则此功能非常有用。 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/

火灾调整大小事件一次不基于时间

2 个答案: