【无标题】

浏览器事件的防抖与节流

1. 优化 setInterval
   检查是否需要：首先确认是否真的需要 setInterval。如果只是想在窗口大小变化时执行某些操作，可能只需要 resize 事件监听器就足够了。
   减少执行频率：如果确实需要 setInterval，考虑增加其时间间隔，减少执行频率。
   清除并重置：在窗口大小变化时，可以清除 setInterval 并根据新的尺寸重新设置。
2. 优化 resize 事件监听器
   防抖（Debouncing）：使用防抖技术来限制 resize 事件处理函数的执行频率。防抖意味着在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。
   节流（Throttling）：另一种方法是节流，它确保在指定时间间隔内，处理函数只执行一次。
   使用防抖技术优化 resize 事件：

function debounce(func, wait) {  
    let timeout;  
    return function() {  
        const context = this, args = arguments;  
        clearTimeout(timeout);  
        timeout = setTimeout(() => func.apply(context, args), wait);  
    };  
}  
  
const optimizedResize = debounce(function() {  
    // 这里放置你的窗口大小变化时想要执行的代码  
    console.log('Window resized!');  
}, 250);  
  
window.addEventListener('resize', optimizedResize);

这样，无论窗口大小如何变化，optimizedResize 函数最多每 250 毫秒执行一次，从而避免了因频繁执行而导致的性能问题。

setInterval长时间运行时，如果此时调整浏览器窗口大小，会很卡，在业务代码逻辑中，最好在窗口resize事件触发时，重置interval