JavaScript/JQuery: $(window).resize 调整大小完成后如何触发？

一尘不染

JavaScript/JQuery: $(window).resize 调整大小完成后如何触发？

javascript

我正在使用 JQuery：

$(window).resize(function() { ... });

但是，似乎如果用户通过拖动窗口边缘来手动调整其浏览器窗口的大小以使其变大/变小，则上述.resize事件会多次触发。

问题：如何在浏览器窗口调整大小完成后调用函数（以便事件只触发一次）？

阅读 119

2022-06-11

共1个答案

一尘不染

这是对 CMS 解决方案的修改，可以在代码中的多个位置调用：

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

用法：

$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});

如果您只调用一次，CMS 的解决方案很好，但如果您多次调用它，例如，如果您的代码的不同部分设置单独的回调来调整窗口大小，那么它将失败 b/c 他们共享timer变量。

通过此修改，您可以为每个回调提供一个唯一 ID，这些唯一 ID 用于将所有超时事件分开。

2022-06-11