如何在窗口大小调整完成后仅执行一次 $(window).resize() ？

目标事件完成：$(window).resize() 执行后

使用 $(window).resize(function() { ... }) 时为了监视浏览器窗口大小的调整，您可能会在手动窗口调整期间遇到多个事件触发。当每次拖动窗口边框时都会触发事件，从而导致出现不良行为时，就会出现此问题。为了解决这个问题，让我们探索一种解决方案，确保仅在调整大小过程完成后执行。

下面的代码片段提供了一个实用的解决方案，可以在代码的各个部分使用：

<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>

要利用此解决方案，请按照以下步骤操作：

1. 实现用于调整窗口大小的自定义事件侦听器。

<code class="javascript">$(window).resize(function () {</code>

2. 在事件侦听器内，调用 waitForFinalEvent 设置回调超时。

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

500 参数表示延迟 500 毫秒，以便有足够的时间完成调整大小过程。 uniqueId 参数确保多个回调可以利用相同的超时机制而不会相互干扰。

此修改后的解决方案允许您定义在窗口大小调整完成后执行的多个回调，有效地满足代码的各个部分。

以上是如何在窗口大小调整完成后仅执行一次 $(window).resize() ？的详细内容。更多信息请关注PHP中文网其他相关文章！