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

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中使用()=>{}符号来保留作用域，否则你将无法进行任何函数调用或使用它。

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

您可以将引用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!");   
}

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

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

我猜我的情况可能与其他一些人不同，但我有一个问题，只有在iOS上的方向变化，但希望调整大小事件立即运行。我使用了ScreenOrientation API:

screen.orientation.addEventListener('change', (e) => {});

我自己写了一个小包装函数…

onResize  =   function(fn) {
    if(!fn || typeof fn != 'function')
        return 0;

    var args    = Array.prototype.slice.call(arguments, 1);

    onResize.fnArr    = onResize.fnArr || [];
    onResize.fnArr.push([fn, args]);

    onResize.loop   = function() {
        $.each(onResize.fnArr, function(index, fnWithArgs) {
            fnWithArgs[0].apply(undefined, fnWithArgs[1]);
        });
    };

    $(window).on('resize', function(e) {
        window.clearTimeout(onResize.timeout);
        onResize.timeout    = window.setTimeout("onResize.loop();", 300);
    });
};

用法如下:

var testFn  = function(arg1, arg2) {
    console.log('[testFn] arg1: '+arg1);
    console.log('[testFn] arg2: '+arg2);
};

// document ready
$(function() {
    onResize(testFn, 'argument1', 'argument2');
});