Question

我在尝试仅在触发onresize事件时运行一次函数时遇到一些麻烦，我已经查看了这些问题DOM onresize event但是我没有使用jQuery而且没有使用该函数。有什么建议？

Answer 1

在调整大小操作期间，每个帧都会调用一次resize事件。如果要在调整大小时调用它，只需使用回调函数设置计时器。

var timeOut = null;

window.onresize = function(){
    if (timeOut != null)
        clearTimeout(timeOut);

    timeOut = setTimeout(function(){
        // YOUR RESIZE CODE HERE
    }, 500);
};

Answer 2

您可以使用debounce实施from underscore：

  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);
      };
      if (immediate && !timeout) func.apply(context, args);
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }
  window.onresize = debounce(function() {
      // Your code here
  }, 500);

或使用library from the linked question。没有jQuery，它是Cowboy.debounce(...)。

JavaScript onresize事件多次触发

2 个答案: