如何仅在调整大小事件完成后触发操作？

等待“调整大小”事件结束以触发操作

通常在使用响应式设计时，需要执行仅在调整大小过程完全完成后才执行操作。然而，使用 $(window).resize() 的传统事件处理可能会在调整大小过程中触发多个调用，从而导致不良行为。

解决方案：使用 setTimeout() 和clearTimeout()

为了实现所需的行为，可以结合使用 setTimeout() 和clearTimeout()。下面是一个示例：

function resizedw() {
  // Haven't resized in 100ms!
}

var doit;
window.onresize = function () {
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

这种方法利用计时器来延迟 resizedw() 函数的执行。当调整大小事件发生时，它会清除任何现有的计时器并启动一个新的计时器。如果调整大小过程在 100 毫秒内继续，则计时器将再次重置。仅当调整大小停止 100 毫秒时，才会调用 resizedw() 函数。

jsfiddle 上的示例：

有关此解决方案的工作示例，请参阅到答案中提供的 jsfiddle 链接。

以上是如何仅在调整大小事件完成后触发操作？的详细内容。更多信息请关注PHP中文网其他相关文章！