如何在 JavaScript/jQuery 中调整窗口大小后仅执行一次函数？

JavaScript/jQuery 中窗口大小调整后延迟执行

浏览器时触发 JavaScript 和 jQuery 中的 $(window).resize 事件窗口调整大小。然而，在通过拖动窗口边缘手动调整大小期间，它经常会触发多次。

实现单次调用：

调整大小后仅调用一次函数完成后，可以使用计时器来延迟执行，直到调整大小过程完成。这是一个解决方案：

解决方案：

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

用法：

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

在此解决方案中，一个独特的每个回调使用标识符来处理多个事件注册。

这种方法确保回调函数在指定的延迟后仅被调用一次，从而为调整大小提供足够的时间来完成并防止冗余事件触发。

以上是如何在 JavaScript/jQuery 中调整窗口大小后仅执行一次函数？的详细内容。更多信息请关注PHP中文网其他相关文章！