JavaScript onresize 事件触发多次

JavaScript onresize event fires multiple times

本文关键字：onresize 事件 JavaScript      更新时间：2023-09-26

当触发 onresize 事件时，我在尝试只运行一次函数时遇到了一些麻烦，我已经查看了这个问题 DOM onresize 事件，但我没有使用 jQuery，并且无法让该函数在没有的情况下工作。有什么建议吗？

在调整大小操作期间，为每一帧调用一次 resize 事件。如果要在调整大小完成后调用它，只需使用回调函数设置计时器即可。

var timeOut = null;
window.onresize = function(){
    if (timeOut != null)
        clearTimeout(timeOut);
    timeOut = setTimeout(function(){
        // YOUR RESIZE CODE HERE
    }, 500);
};
您可以使用

下划线中的debounce实现：

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

或者使用链接问题中的库。没有jQuery，它Cowboy.debounce(...)。

相关文章：