jQuery——如何等待“结束”的大小调整事件，然后才执行操作？

在前端开发中，我们常常需要监听页面元素的大小变化来触发相应的操作。然而，当一个元素正在动态地调整大小时，会连续触发多次 resize 事件，这可能会导致性能问题或不必要的操作。

本文将介绍如何使用 jQuery 监听元素的大小调整事件，并在调整结束后才执行特定的操作，以提高页面性能和用户体验。

1. 监听元素大小调整事件

在 jQuery 中，可以使用 .resize() 方法来监听元素的大小调整事件。例如，下面的代码会在浏览器窗口大小改变时，控制台输出一条消息：

$(window).resize(function() {
  console.log('window resized');
});

同样，可以监听指定元素的大小调整事件。例如，下面的代码会在 <div id="myDiv"></div> 元素大小改变时，控制台输出一条消息：

$('#myDiv').resize(function() {
  console.log('myDiv resized');
});

2. 等待“结束”的大小调整事件

如果在元素大小调整过程中执行一些耗时的操作，那么连续触发的 resize 事件可能会导致性能问题或不必要的操作。为了避免这种情况，我们可以等待大小调整事件“结束”后再执行操作。

一种常见的做法是使用 setTimeout 函数来延迟执行操作。例如，下面的代码会在 <div id="myDiv"></div> 元素大小调整结束后，延迟 200 毫秒执行操作：

var resizeTimer;
$('#myDiv').resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    console.log('myDiv resized (end)');
  }, 200);
});

上述代码中，clearTimeout 函数用于取消之前设置的延迟执行操作，以确保只有最后一次触发的 resize 事件才会执行。而 setTimeout 函数则用于设置延迟执行操作的时间间隔，这里设置为 200 毫秒。

3. 总结

本文介绍了如何使用 jQuery 监听元素的大小调整事件，并在调整结束后才执行特定的操作。具体做法是使用 setTimeout 函数来延迟执行操作，以避免过多的 resize 事件连续触发导致的性能问题或不必要的操作。

在实际开发中，我们可以根据具体情况调整延迟执行操作的时间间隔，以适应不同的页面和设备。同时，还可以结合其他技术手段进行优化，例如节流（throttling）和防抖（debouncing）等。

示例代码：https://codepen.io/chatgpt/pen/zYrLaBm

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9144