JavaScript中的防抖(debounce)和节流(throttle)是两种常用的优化策略，它们主要用于控制频繁触发的函数调用，以提高性能和用户体验。这两种技术在处理窗口 resize 事件、滚动事件、搜索输入框的实时查询等场景中尤其有用。
### 函数防抖(debounce)
函数防抖的核心思想是在事件被触发后的一段时间内，如果这段时间内没有再次触发事件，那么事件处理函数就会被执行。如果在这段时间内事件又被触发，那么之前设定的计时器会被清除，重新开始计时。这样可以确保在一系列连续的操作结束后，只执行一次处理函数。例如，用户连续输入文本框时，我们可以使用防抖来限制搜索请求的发送，避免短时间内发送过多请求。
```javascript
function debounce(fn) {
let timeout = null;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi));
```
在这个例子中，用户每输入一次，`debounce`函数都会清除旧的计时器并设置新的计时器。如果500毫秒内没有新的输入，`sayHi`函数就会被执行。
### 函数节流(throttle)
函数节流则是确保在一定时间内，无论事件触发多少次，只执行一次处理函数。它并不会像防抖那样等到所有操作结束才执行，而是按照固定的周期执行。比如在页面滚动时，我们可能只需要在滚动停止的瞬间更新滚动位置，而不是每滚动一次就更新。
```javascript
function throttle(fn) {
let canRun = true;
return function () {
if (!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
```
在这个例子中，`throttle`函数通过`canRun`标记来判断是否可以执行函数。在每次事件触发时，如果`canRun`为真，就设置`canRun`为假，然后在500毫秒后执行`fn`。这样保证了即使窗口在短时间内被频繁调整大小，`sayHi`函数也会每隔500毫秒执行一次。
总结来说，防抖和节流都是用来优化频繁触发的函数调用，但它们的策略不同。防抖是在事件触发的间隙期结束时执行，而节流是在固定时间间隔内执行。选择哪种策略取决于具体的需求，例如，如果你希望在用户停止操作后立即执行一次操作，防抖可能是更好的选择；如果希望在用户操作期间保持一定的执行频率，那么节流更合适。理解并合理应用这两种技术，可以帮助我们编写出更加高效和响应迅速的JavaScript代码。
