窗口的ResizeStart和ResizeEnd事件

http://jsfiddle.net/04fLy8t4/

我实现了一个函数，它在用户DOM元素上触发两个事件:

调整大小开始 调整大小结束

代码:

var resizeEventsTrigger = (function () {
    function triggerResizeStart($el) {
        $el.trigger('resizestart');
        isStart = !isStart;
    }

    function triggerResizeEnd($el) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function () {
            $el.trigger('resizeend');
            isStart = !isStart;
        }, delay);
    }

    var isStart = true;
    var delay = 200;
    var timeoutId;

    return function ($el) {
        isStart ? triggerResizeStart($el) : triggerResizeEnd($el);
    };

})();

$("#my").on('resizestart', function () {
    console.log('resize start');
});
$("#my").on('resizeend', function () {
    console.log('resize end');
});

window.onresize = function () {
    resizeEventsTrigger( $("#my") );
};

有一个优雅的解决方案使用下划线。js所以，如果你在你的项目中使用它，你可以做以下-

$( window ).resize( _.debounce( resizedw, 500 ) );

这应该足够了:)但是，如果你有兴趣阅读更多，你可以查看我的博客文章- http://rifatnabi.com/post/detect-end-of-jquery-resize-event-using-underscore-debounce(deadlink)

Internet Explorer提供一个resizeEnd事件。其他浏览器会在您调整大小时多次触发调整大小事件。

这里还有其他很好的答案，展示了如何使用setTimeout和lodash和下划线中的.throttle， .debounce方法，所以我将提到Ben Alman的throttle-debounce jQuery插件，它实现了你想要的东西。

假设你有这样一个函数，你想在调整大小后触发:

function onResize() {
  console.log("Resize just happened!");
};

节流阀的例子 在下面的例子中，onResize()在调整窗口大小的过程中只会每250毫秒调用一次。

$(window).resize( $.throttle( 250, onResize) );

防反跳的例子 在下面的例子中，onResize()只会在窗口调整动作结束时被调用一次。这与@Mark在他的回答中呈现的结果相同。

$(window).resize( $.debounce( 250, onResize) );

你可以使用setTimeout()和clearTimeout()

function resizedw(){
    // Haven't resized in 100ms!
}

var doit;
window.onresize = function(){
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

jsfiddle上的代码示例。

窗口的ResizeStart和ResizeEnd事件

http://jsfiddle.net/04fLy8t4/

我实现了一个函数，它在用户DOM元素上触发两个事件:

调整大小开始 调整大小结束

代码:

var resizeEventsTrigger = (function () {
    function triggerResizeStart($el) {
        $el.trigger('resizestart');
        isStart = !isStart;
    }

    function triggerResizeEnd($el) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function () {
            $el.trigger('resizeend');
            isStart = !isStart;
        }, delay);
    }

    var isStart = true;
    var delay = 200;
    var timeoutId;

    return function ($el) {
        isStart ? triggerResizeStart($el) : triggerResizeEnd($el);
    };

})();

$("#my").on('resizestart', function () {
    console.log('resize start');
});
$("#my").on('resizeend', function () {
    console.log('resize end');
});

window.onresize = function () {
    resizeEventsTrigger( $("#my") );
};

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