Question

我在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上连续两个警报窗口，我看起来就像FF5崩溃了。

我错过了什么？每个维度（x / y）是一个火吗？

Answer 1

你知道了，有些浏览器会在调整大小时启动并再次启动，而其他浏览器会像FF一样连续启动。解决方案是使用setTimeout来避免一直开火。可以找到一个示例here。以下是来自相同参考的代码：

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

Answer 2

这是一个简单的例子，如果用户停止调整大小500ms（半秒），你的功能将会激活。 clearTimeout可以防止你的函数不断重写。您可以根据需要调整此值。 500毫秒可能太早，你可能会把它提高到1000，取决于你在函数内做了什么

var resizeTimeout;
$(window).resize(function(){
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function(){    
        alert('your function to run on resize');
    }, 500);
});

Answer 3

似乎这是一个特定于浏览器的怪癖。根据{{3}}事件的文档：

调整大小处理程序中的代码绝不应该依赖于它的次数调用处理程序。根据实现，调整大小事件可以在调整大小正在进行时连续发送（典型的行为在Internet Explorer和基于WebKit的浏览器中，如Safari和 Chrome），或仅在调整大小操作结束时（典型的在其他一些浏览器中的行为，例如Opera。

（强调我的）

解决方法是设置计时器并检查窗口的尺寸是否已更改。

Answer 4

浏览器不会一致地触发调整大小事件。为了避免它不断触发，通常使用setTimeout。以下是其中的一些内容：

JQuery: How to call RESIZE event only once it's FINISHED resizing?

JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

在jquery中多次触发window.resize

4 个答案: