Question

我在window.resize（）事件的帮助下并在this链接的帮助下完全调整窗口大小时调用了一些代码。它有效，但问题是当你重新调整大小超过3次时它会变慢。因此，当您增加重新调整大小的数量时，页面会变得越来越慢。

我的代码如下，

 $(window).bind('resize', function(e) {
     window.resizeEvt;
     $(window).resize(function() {
         clearTimeout(window.resizeEvt);
         window.resizeEvt = setTimeout(function() {
             //code to do after window is resized
         }, 250);
     });
 });

任何人都可以帮我确定放慢速度的原因吗？

Answer 1

每次调整浏览器大小时都会触发窗口调整大小事件，对于每个像素而不是一次;事件没有延迟。此外，您所做的是手动执行调整大小事件...当您处于调整大小事件时。您不需要致电$(window).resize！您只需要绑定一次事件（并且不推荐使用.bind，现在支持.on）。

您的解决方案是限制在调整浏览器大小时执行的操作。这个问题，我亲自在几个项目中解决了，而且代码运行得很好。

/**
  Author: yanick.rochon@gmail.com
  License: MIT

  Return a copy of the function fn that can be called multiple times.
  The function fn will actually be called if 1) a certain amount of
  time elapsed after the last call, or 2) a certain number of repetitive
  calls have been made.

  The function fn will be invoked with the last arguments sent through
  the returned proxy function.

  Options are :

    - delay {Numeric}   the number of ms before satisfying the first condition
    - stack {Numeric}   the number of repetitive calls before satisfying the second condition

  NOTE : these conditions are ORed, meaning that fn will be invoked if either
         condition 1) or 2) is met.

  @param {Function} fn       the function to proxy
  @param {Object} options    the key-pair of options
  @param {any} ctx           a context to bind fn to when calling
  @return {Function}         a proxy function.
*/
function asyncProxy(fn, options, ctx) {
  var timer = null;
  var counter = 0;
  var _call = function (args) {
    counter = 0;

    fn.apply(ctx, args);
  };

  ctx = ctx || window;
  options = $.extend({
    delay: 0,
    stack: Infinity
  }, options);

  return function () {
    counter++;

    // prevent calling the delayed function multiple times
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    if (counter >= options.stack) {
      _call(arguments);
    } else {
      var args = arguments;

      timer = setTimeout(function () {
        timer = null;
        _call(args);
      }, options.delay);
    }
  };
}

你就像这样使用它

var processWindowResize = asyncProxy(function (event) {

  // *** Your code goes here ***

}, {
  delay: 250
});

$(window).on('resize', processWindowResize);

Answer 2

那是因为你永远不会结束重新调整大小，所以事件一直在持续，每次都比另一个重，你甚至可以使用fiddler检查你的响应。

当窗口完成大小调整时，你需要做的是简单的，结束时：

var someInvoice = GetInvoice(1);
var name = someInvoice.Invoice.customerName;
var total = someInvoice.Total;

这样您就可以清除事件，每次执行事件时都将其关闭，这样就不会减慢您的网页速度。

Answer 3

任何基于超时的代码的问题在于，如果用户缓慢调整窗口大小，那么它可以多次触发调整大小（包括此代码） - 如果它只是更新显示的情况，那么我的自己的偏好是使用requestAnimationFrame来确保此更新尽可能干净 -

var resizing = false,
    processingResize = false;

function processResize() {
    if (resizing) {
        resizing = false;
        window.requestAnimationFrame(processResize);
    } else {
        processingResize = false;
        // Do stuff here
    }
}

$(window).on("resize", function(event) {
    if (!resizing && event.target === window) {
        resizing = true;
        if (!processingResize ) {
            processingResize = true;
            window.requestAnimationFrame(processResize);
        }
    }
});

一般来说，我实际上有一个rAF包装器可以检查document.hidden并在页面不可见时使用setTimeout - 但这与简单的用法无关，因为它可以用于当页面再次可见时调用一次，然后可以进行任何调整大小。

如果您尝试检测用户何时完成调整大小，那么就没有绝对的方法，但合并mousemove事件会更准确地捕获它。

随着调整大小的增加，Window.resize（）正在减慢

3 个答案: