JQuery:只有在完成大小调整后才能调用RESIZE事件？

Question

一旦浏览器窗口完成大小调整,如何调用函数？

我试图这样做,但我遇到了问题.我正在使用JQuery Resize事件函数:

$(window).resize(function() {
  ... // how to call only once the browser has FINISHED resizing?
});

但是,如果用户手动调整浏览器窗口的大小,则会连续调用此函数.这意味着,它可能会在短时间内调用此函数数十次.

我怎么只能拨打调整大小功能单一的时间(一旦浏览器窗口已经完成调整)？

UPDATE

也无需使用全局变量.

Answer 1

以下是使用jh指令的示例

您可以将引用ID存储到任何setInterval或setTimeout.像这样:

var loop = setInterval(func, 30);

// some time later clear the interval
clearInterval(loop);

Answer 2

辩论.

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 
} ) );

注意,您可以将此方法用于任何您想要去抖的事件(关键事件等).

调整超时参数以获得最佳效果.

Answer 3

您可以使用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.如果在给定间隔内未触发事件,它会将一个或多个事件的事件处理函数附加到所选元素.如果您只想在延迟之后触发回调(例如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-event处理程序一样使用它,除了你可以传递一个额外的参数作为最后一个:

$(window).on('resize', function(e) {
    console.log(e.type + '-event was 200ms not triggered');
}, 200);

http://jsfiddle.net/ARTsinn/EqqHx/

Answer 4

var lightbox_resize = false;
$(window).resize(function() {
    console.log(true);
    if (lightbox_resize)
        clearTimeout(lightbox_resize);
    lightbox_resize = setTimeout(function() {
        console.log('resize');
    }, 500);
});

Answer 5

只是为了添加上面的内容,通常会因为滚动条的弹出和弹出而获得不需要的调整大小事件,这里有一些代码可以避免这种情况:

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
});

见jsfiddle

Answer 6

Underscore.js有几个很好的方法来完成这项任务:throttle和debounce.即使您没有使用下划线,也请查看这些功能的来源.这是一个例子:

var redraw = function() {'redraw logic here'};
var debouncedRedraw = _.debounce(redraw, 750);
$(window).on('resize', debouncedRedraw);