窗口的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") );
};

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

这是我用来延迟重复操作的，它可以在你的代码中的多个地方调用:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

用法:

$(window).resize(function () { 
   debounce(function() {
          //...
    }, 500);
});

这是我根据@Mark Coleman的答案写的代码:

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        console.log('Resized finished.');
    }, 250);
});

谢谢马克!

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

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

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

jsfiddle上的代码示例。

这适用于我，因为我不想使用任何插件。

$(window).resize(function() {
    var originalWindowSize = 0;
    var currentWidth = 0;

    var setFn = function () {
        originalWindowSize = $(window).width();
    };

    var checkFn = function () {
        setTimeout(function () {
            currentWidth = $(window).width();
            if (currentWidth === originalWindowSize) {
                console.info("same? = yes") 
                // execute code 
            } else {
                console.info("same? = no"); 
                // do nothing 
            }
        }, 500)
    };
    setFn();
    checkFn();
});

在窗口重新大小调用“setFn”获得窗口的宽度，并保存为“originalWindowSize”。然后调用“checkFn”，在500ms(或您的首选项)后获得当前窗口大小，并将原始窗口与当前窗口进行比较，如果它们不相同，则窗口仍在重新调整大小。不要忘记在生产环境中删除控制台消息，并且(可选)可以使“setFn”自动执行。