极客笔记jQuery 为什么会触发两次 resize 事件
在本文中，我们将介绍为什么在使用 jQuery 的 resize 事件时会出现触发两次的情况。
阅读更多：jQuery 教程
问题的背景和原因
当我们使用 jQuery 绑定 resize 事件时，有时会发现事件会被触发两次。这可能会导致一些问题，例如重复执行代码或性能问题。那么为什么会出现这种情况呢？
首先，我们需要了解浏览器中的 resize 事件。当浏览器窗口的大小发生变化时，浏览器会触发 resize 事件。这个事件让开发人员能够在浏览器窗口大小改变时执行相应的操作。
问题的主要原因是浏览器存在对 resize 事件的优化机制。为了提高性能，浏览器在 resize 事件的触发时机上采取了一些策略。其中一个策略是，当浏览器窗口大小发生变化时，浏览器会立即触发 resize 事件。然后，它会等待一小段时间，以确定窗口的大小是否稳定。如果窗口大小稳定，浏览器会再次触发 resize 事件。
解决方法
虽然浏览器会触发两次 resize 事件，但我们仍然可以通过不同的方法来避免重复执行代码和性能问题。
1. 使用定时器延迟执行代码
一个常见的解决方法是使用定时器来延迟执行代码。当第一次触发 resize 事件时，我们可以使用 setTimeout 函数来延迟执行代码。如果在一小段时间内没有再次触发 resize 事件，我们可以认为窗口大小已稳定，然后执行相应的操作。
var resizeTimer;
$(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// 执行代码
}, 200);
});
在上面的代码中，我们设置了一个 200ms 的定时器。当 resize 事件触发时，我们先清除之前的定时器，然后重新设置新的定时器。
2. 使用节流函数
另一种解决方法是使用节流函数来限制代码的执行频率。节流函数可以确保在指定时间间隔内只执行一次代码，而忽略其他触发事件。这样可以避免重复执行代码和提高性能。
function throttle(func, wait) {
var timer;
return function() {
clearTimeout(timer);
timer = setTimeout(function() {
func.apply(this, arguments);
}, wait);
};
}
$(window).on('resize', throttle(function() {
// 执行代码
}, 200));
上面的代码定义了一个节流函数 throttle，它接受一个函数和时间间隔作为参数。在 resize 事件触发时，我们使用 throttle 包装要执行的代码，以确保在指定的时间间隔内只执行一次。
示例说明
假设我们有一个需求是在浏览器窗口大小改变时改变某个元素的背景颜色。如果我们直接绑定 resize 事件并执行代码，就会出现触发两次的情况。这时我们可以使用上述的解决方法来避免这个问题。
var resizeTimer;
(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// 改变元素的背景颜色('#myElement').css('background-color', 'red');
}, 200);
});
在上面的代码中，我们将改变元素背景颜色的代码包装在一个延迟执行的函数中。这样，代码只会在 resize 事件触发后一小段时间内执行一次，避免了重复执行的问题。
总结
在使用 jQuery 的 resize 事件时，我们可能会遇到事件触发两次的情况。这是因为浏览器在 resize 事件上存在优化机制，会触发两次事件以提高性能。我们可以通过使用定时器延迟执行代码或者使用节流函数来避免重复执行代码和性能问题。根据实际需求选择合适的解决方法，可以确保代码的正常运行并提升用户体验。