所以我目前使用的是:

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

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


当前回答

更新!

我还创造了一个更好的选择: https://stackoverflow.com/a/23692008/2829600 (支持“删除功能”)

原来的帖子:

我写了这个简单的函数来处理执行中的延迟,在jQuery .scroll()和.resize()中很有用,所以callback_f只会对特定的id字符串运行一次。

function delay_exec( id, wait_time, callback_f ){

    // IF WAIT TIME IS NOT ENTERED IN FUNCTION CALL,
    // SET IT TO DEFAULT VALUE: 0.5 SECOND
    if( typeof wait_time === "undefined" )
        wait_time = 500;

    // CREATE GLOBAL ARRAY(IF ITS NOT ALREADY CREATED)
    // WHERE WE STORE CURRENTLY RUNNING setTimeout() FUNCTION FOR THIS ID
    if( typeof window['delay_exec'] === "undefined" )
        window['delay_exec'] = [];

    // RESET CURRENTLY RUNNING setTimeout() FUNCTION FOR THIS ID,
    // SO IN THAT WAY WE ARE SURE THAT callback_f WILL RUN ONLY ONE TIME
    // ( ON LATEST CALL ON delay_exec FUNCTION WITH SAME ID  )
    if( typeof window['delay_exec'][id] !== "undefined" )
        clearTimeout( window['delay_exec'][id] );

    // SET NEW TIMEOUT AND EXECUTE callback_f WHEN wait_time EXPIRES,
    // BUT ONLY IF THERE ISNT ANY MORE FUTURE CALLS ( IN wait_time PERIOD )
    // TO delay_exec FUNCTION WITH SAME ID AS CURRENT ONE
    window['delay_exec'][id] = setTimeout( callback_f , wait_time );
}


// USAGE

jQuery(window).resize(function() {

    delay_exec('test1', 1000, function(){
        console.log('1st call to delay "test1" successfully executed!');
    });

    delay_exec('test1', 1000, function(){
        console.log('2nd call to delay "test1" successfully executed!');
    });

    delay_exec('test1', 1000, function(){
        console.log('3rd call to delay "test1" successfully executed!');
    });

    delay_exec('test2', 1000, function(){
        console.log('1st call to delay "test2" successfully executed!');
    });

    delay_exec('test3', 1000, function(){
        console.log('1st call to delay "test3" successfully executed!');
    });

});

/* RESULT
3rd call to delay "test1" successfully executed!
1st call to delay "test2" successfully executed!
1st call to delay "test3" successfully executed!
*/

其他回答

您可以将引用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!");   
}
var resizeTimer;
$( window ).resize(function() {
    if(resizeTimer){
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function() {
        //your code here
        resizeTimer = null;
        }, 200);
    });

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

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

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

谢谢马克!

我采取了稍微不同的策略,依赖于mouseUp作为调整大小事件的结束。trackSize在documentReady上被调用,然后也设置了wide的初始值。

  var THRESHOLD = 784;
  var TALL = 125, SHORT = 50;
  var wide = (window.document.body.clientWidth >= THRESHOLD );

  function trackSize() {
    if( !wide ) {
      setHeight( TALL );
    } else {
      setHeight( SHORT );
    }
    parent.window.addEventListener('resize', onResize);
  }
  function onResize(e) {
    parent.window.removeEventListener('resize', onResize);
    parent.window.addEventListener('mouseup', onMouseUp) ;
  }
  function onMouseUp(e) {
    parent.window.removeEventListener('mouseup', onMouseUp);
    wide = (window.document.body.clientWidth >= THRESHOLD);
    trackSize();
  }

在设置了窗口的初始高度之后,我们开始监听调整大小事件。当它开始时,我们停止监听并开始监听mouseUp事件。因此,我们知道mouseUp将结束调整大小。在mouseUp中,我们停止监听并根据窗口的宽度设置切换,然后循环回trackSize。

trackSize首先根据切换设置窗口的高度——如果低于阈值,则增加高度(因为Bootstrap列的堆栈宽度较小),否则设置为标准。然后我们再听下一个调整大小的事件。

注意:这个解决方案并不真正适用于使用最大化或恢复窗口按钮立即调整大小。也许添加一个像isMouseDown这样的测试并绕过鼠标监听器就足够了——我还没有测试过。

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