如何等待“调整大小”事件的“结束”，然后才执行一个动作?

所以我目前使用的是:

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

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

当前回答

我采取了稍微不同的策略，依赖于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这样的测试并绕过鼠标监听器就足够了——我还没有测试过。

2022-05-02 18:19:05

其他回答

(function(){
    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    special.resizestart = {
        setup: function() {
            var timer,
                handler =  function(evt) {
                    var _self = this,
                        _args = arguments;
                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = 'resizestart';
                        jQuery.event.handle.apply(_self, _args);
                    }

                    timer = setTimeout( function(){
                        timer = null;
                    }, special.resizestop.latency);
                };
            jQuery(this).bind('resize', handler).data(uid1, handler);
        },
        teardown: function(){
            jQuery(this).unbind( 'resize', jQuery(this).data(uid1) );
        }
    };

    special.resizestop = {
        latency: 200,
        setup: function() {
            var timer,
                handler = function(evt) {
                    var _self = this,
                        _args = arguments;
                    if (timer) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout( function(){
                        timer = null;
                        evt.type = 'resizestop';
                        jQuery.event.handle.apply(_self, _args);
                    }, special.resizestop.latency);
                };

            jQuery(this).bind('resize', handler).data(uid2, handler);
        },
        teardown: function() {
            jQuery(this).unbind( 'resize', jQuery(this).data(uid2) );
        }
    };
})();

$(window).bind('resizestop',function(){
    //...
});

2013-06-05 09:24:22

有一个比计算两次调用之间的增量时间更简单的方法来在调整大小结束时执行函数，简单地像这样做:

var resizeId;
$(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(resizedEnded, 500);
});

function resizedEnded(){
    ...
}

和Angular2的等价函数:

private resizeId;
@HostListener('window:resize', ['$event'])
onResized(event: Event) {
  clearTimeout(this.resizeId);
  this.resizeId = setTimeout(() => {
    // Your callback method here.
  }, 500);
}

对于angular方法，在setTimeout中使用()=>{}符号来保留作用域，否则你将无法进行任何函数调用或使用它。

2020-02-13 09:42:12

我采取了稍微不同的策略，依赖于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();
  }

2022-05-02 18:19:05

更新!

我还创造了一个更好的选择: 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!
*/

2013-11-10 02:43:35

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

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

2014-12-30 17:14:43

如何等待“调整大小”事件的“结束”，然后才执行一个动作?

推荐文章

最新文章

标签