如何在 JavaScript/jQuery 中检测准确的窗口大小调整事件？

在 JavaScript/jQuery 中检测准确的窗口大小调整事件

当使用 $(window).resize 监视窗口大小变化时，常见的是在手动调整大小期间遇到多个事件触发。当您需要在调整大小完成后才执行代码时，这可能会出现问题。

解决方案：

为了解决这个问题，我们可以使用 waitForFinalEvent 函数：

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

此函数确保回调仅在最后一个调整大小事件之后的指定延迟（默认为 500 毫秒）后执行。 uniqueId 参数允许使用多个回调而不会发生冲突。

用法：

要使用此功能，您可以修改代码如下：

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

通过实施此解决方案，您可以确保您的代码准确响应窗口调整大小事件，仅在调整大小完成后执行。

以上是如何在 JavaScript/jQuery 中检测准确的窗口大小调整事件？的详细内容。更多信息请关注PHP中文网其他相关文章！