所以我目前使用的是:

$(window).resize(function(){resizedw();});

但是在调整大小过程中,这个函数会被调用很多次。是否有可能在事件结束时捕获事件?


当前回答

你可以使用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)事件处理程序。如果事件在给定的时间间隔内没有触发,它将一个或多个事件的事件处理程序函数附加到选定的元素。如果您希望仅在延迟之后触发回调,例如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处理程序一样使用它,除了你可以传递一个额外的参数作为last:

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

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

其他回答

var resizeTimer;
$( window ).resize(function() {
    if(resizeTimer){
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function() {
        //your code here
        resizeTimer = null;
        }, 200);
    });

这为我试图在chrome做什么工作。这将不会触发回调直到200ms后最后调整大小事件。

因为选择的答案实际上没有工作。如果你没有使用jquery,这里有一个简单的节流函数的例子,如何使用它来调整窗口大小

    function throttle(end,delta) {

    var base = this;

    base.wait = false;
    base.delta = 200;
    base.end = end;

    base.trigger = function(context) {

        //only allow if we aren't waiting for another event
        if ( !base.wait ) {

            //signal we already have a resize event
            base.wait = true;

            //if we are trying to resize and we 
            setTimeout(function() {

                //call the end function
                if(base.end) base.end.call(context);

                //reset the resize trigger
                base.wait = false;
            }, base.delta);
        }
    }
};

var windowResize = new throttle(function() {console.log('throttle resize');},200);

window.onresize = function(event) {
    windowResize.trigger();
}

您可以将引用id存储到任何setInterval或setTimeout。是这样的:

var loop = setInterval(func, 30);

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

要在不使用“全局”变量的情况下做到这一点,可以向函数本身添加一个局部变量。例:

$(window).resize(function() {
    clearTimeout(this.id);
    this.id = setTimeout(doneResizing, 500);
});

function doneResizing(){
  $("body").append("<br/>done!");   
}

Mark Coleman的答案当然比所选的答案要好得多,但如果你想避免超时ID的全局变量(Mark回答中的doit变量),你可以做以下其中之一:

(1)使用立即调用的函数表达式(IIFE)来创建闭包。

$(window).resize((function() { // This function is immediately invoked
                               // and returns the closure function.
    var timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
            timeoutId = null; // You could leave this line out.
            // Code to execute on resize goes here.
        }, 100);
    };
})());

(2)使用事件处理函数的属性。

$(window).resize(function() {
    var thisFunction = arguments.callee;
    clearTimeout(thisFunction.timeoutId);
    thisFunction.timeoutId = setTimeout(function() {
        thisFunction.timeoutId = null; // You could leave this line out.
        // Code to execute on resize goes here.
    }, 100);
});

下面是一个非常简单的脚本,可以在窗口对象上触发'resizestart'和'resizeend'事件。

没有必要在日期和时间上浪费时间。

变量d表示在触发调整大小结束事件之前,调整大小事件之间的毫秒数,您可以使用它来更改结束事件的灵敏度。

要收听这些事件,你所需要做的就是:

resizestart: $(窗口)。on(' Resize Start ', function(event){console.log('Resize Start!');});

resizeend: 美元(窗口)。on('resizeend', function(event){console.log(' resizeend !');});

(function ($) {
    var d = 250, t = null, e = null, h, r = false;

    h = function () {
        r = false;
        $(window).trigger('resizeend', e);
    };

    $(window).on('resize', function (event) {
        e = event || e;
        clearTimeout(t);

        if (!r) {
            $(window).trigger('resizestart', e);
            r = true;
        }

        t = setTimeout(h, d);
    });
}(jQuery));