jQuery 中的 window.resize 多次触发

我在 HTML 文件中有以下 JavaScript/jQuery 代码：

 <html>
  <head>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"
     type="text/javascript"></script>
    <script language="javascript">
    $(window).resize(function(){alert('hi');});</script>
  </head>
  <body>
    resize me
  </body>
</html>

它看起来相对简单，但是当我调整浏览器窗口大小时，我在 Chrome 和 IE9 上得到两个连续的警告窗口，而且我似乎使 Firefox5 崩溃了。

我错过了什么？每个维度 (x/y) 是一场火灾吗？

原文由 Matt 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 408

你明白了，有些浏览器会在调整大小开始时触发并在结束时再次触发，而其他浏览器（如 FF）会连续触发。解决方案是使用 setTimeout 来避免一直开火。可以在此处找到示例。这是来自同一参考的代码：

 (function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
    // smartresize
    jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');

// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});

原文由 Radu 发布，翻译遵循 CC BY-SA 3.0 许可协议

jQuery 中的 window.resize 多次触发

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译