如何防止多次 $(window).resize 事件触发？

使用 $(window).resize 解决多个 Resize 事件触发问题

在 Web 开发中，使用 $(window).resize 事件操作浏览器窗口大小可以触发多次射击。为了解决这个问题，我们探索了一种仅在调整大小操作完成后才执行函数的解决方案。

解决方案：

在浏览器窗口调整大小后调用函数是完成后，我们可以使用 waitForFinalEvent 函数。该函数采用回调函数、毫秒延迟和唯一标识符作为参数。该函数根据延迟设置回调超时，但它还会检查是否存在具有相同唯一 ID 的先前超时。如果是，则取消之前的超时并设置新的超时。

实现：

<code class="javascript">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);
  };
})();</code>

用法：

在代码中实现 waitForFinalEvent 函数，如下所示：

<code class="javascript">$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});</code>

通过为每个回调提供唯一的 ID，此实现可确保单独的回调不会干扰彼此的超时事件。因此，该函数只会在调整大小操作完成后执行，从而防止多次触发。

以上是如何防止多次 $(window).resize 事件触发？的详细内容。更多信息请关注PHP中文网其他相关文章！