如何在窗口调整大小事件期间仅调用一次javascript函数？

Question

在 jQuery 调整事件页面大小 上，据说：

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

我观察到应用程序中的内存泄漏不断增加，因为我不断调整浏览器窗口的大小，这反过来又不断触发特定的代码。我认为调整大小事件在调整大小操作结束时仅调用一次，但是现在读完这篇文章后，我认为我的代码简直是矫枉过正，

是否有任何既定的做法可以在调整大小操作已经结束时仅触发一次跨浏览器回调？

Answer 1

由于您无论如何都在使用 jQuery，请查看 Ben Alman 的 doTimeout 插件。您可以使用它来反跳您的事件处理程序。

甚至还有一个 与您的情况完全匹配的示例：

$(window).resize(function(){
  $.doTimeout( 'resize', 250, function(){
    // do something computationally expensive
  });
});

关键在这里也就是说，只有在接下来的 250 毫秒内未再次调用调整大小处理程序（即未触发调整大小事件）时，才会执行传递给 doTimeout 的函数。如果是这样，计时器将中止并启动新的计时器。

Answer 2

所以我认为这个答案最好通过执行以下操作而不是 $.doTimeout 方法（它似乎不想在另一个 JQuery 语句内运行）来实现：

// create a global timer var:
var _timeVar;

// create your jQuery window resize method. The clearTimeout() method prevents the
$(window).resize(function(){
    clearTimeout( _timerVar );
    _timerVar = setTimeout('resizeUI()', 250);
});

// my resize function
function resizeUI() {
    // resize stuff here
}

Answer 3

我认为如果您向我们展示您的调整大小事件处理程序将会有所帮助。

在没有看到您的代码的情况下，我所能建议的就是采用某种限制来限制每秒可以触发处理程序的次数：

var lastTime = 0;
$(window).resize(function(){
    // This condition will only be met (at most) once every second
    if (lastTime + 1000 < +new Date) {
        // do your stuff...
        lastTime = +new Date;
    }
});

Answer 4

你可以使用一个标志。在函数开始时设置标志 - 如果在调整大小完成后取消设置。然后不允许再次调用该函数，除非该标志已重置。

Answer 5

感谢您的提示，但我认为它不适用于像 IE 或 Webkit 这样在调整大小时连续触发事件的浏览器。
原因如下：
假设窗口几秒钟没有调整大小，然后调整它的大小：
在第一个事件触发时，lastTime 变量将小于 new Date，因此将执行调整大小的代码。
由于其他事件在调整大小时以高速率触发，因此它们都将不到一秒并且不会触发。最终结果是，对于我们试图捕获的最终窗口大小，不会发生调整大小。

如果我误解了您的代码，请现在告诉我，因为我正在寻找解决方案，并且我希望避免像其他建议的解决方案那样涉及太多计时器。

谢谢。

Answer 6

当 Firefox 启动时（在 XUL Addon 中工作），我接到多个电话。如果您只想一次调用代码一次（当代码已经运行时再次调用代码时会导致错误），您可以仅使用触发器（标志[布尔值]）。

MyClass = {
  is_resizing: false,
  // another variables here...

  resized: function() {
    if (! MyClass.is_resizing) {
      // your code goes here...
    }
  },

  // another methods here...
};

window.addEvenetListener('resize', function(e) { MyClass.resized(); e.stopPropagation(); }, false);