返回
从「防抖」到「节流」，如何让 JavaScript 更高效流畅？
前端
2023-09-14 14:55:15
防抖（debounce）
防抖函数的作用是当一个事件在指定的时间内连续触发时，只执行一次该事件的回调函数。也就是说，只要在规定时间内该事件再次触发，则之前还未执行的回调函数将被取消。这种机制对于防止某些操作被重复触发非常有用，例如当用户快速输入文本时，我们通常只需要在用户停止输入后才执行搜索或其他操作。
实现防抖的常见方法有两种：
- 使用
setTimeout()函数：
function debounce(func, delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
- 使用 Lodash 库提供的
debounce()函数：
import { debounce } from 'lodash';
const debouncedFunction = debounce(func, delay);
节流（throttle）
节流函数的作用是当一个事件在指定的时间内连续触发时，只执行一次该事件的回调函数，但是与防抖不同的是，节流函数会在第一次事件触发时立即执行回调函数，然后在指定时间内忽略所有后续事件的触发，直到指定时间结束后才会再次执行回调函数。节流函数对于防止某些操作被过度触发非常有用，例如当用户滚动页面时，我们通常只需要在用户停止滚动后才执行某些操作。
实现节流的常见方法有两种：
- 使用
setInterval()函数：
function throttle(func, delay) {
let isThrottled = false;
return function () {
if (!isThrottled) {
func.apply(this, arguments);
isThrottled = true;
setTimeout(() => {
isThrottled = false;
}, delay);
}
};
}
- 使用 Lodash 库提供的
throttle()函数：
import { throttle } from 'lodash';
const throttledFunction = throttle(func, delay);
防抖和节流的区别
防抖和节流都用于优化事件处理程序的执行频率，但它们的主要区别在于防抖会在指定时间内只执行一次回调函数，而节流会在第一次事件触发时立即执行回调函数，然后在指定时间内忽略所有后续事件的触发，直到指定时间结束后才会再次执行回调函数。
在实际项目中的应用
防抖和节流在实际项目中的应用非常广泛，例如：
- 输入框输入文字时触发搜索或其他操作： 使用防抖函数可以防止在用户快速输入文本时多次触发搜索或其他操作，从而提高应用程序的性能和响应速度。
- 滚动页面时触发某些操作： 使用节流函数可以防止在用户滚动页面时过度触发某些操作，从而提高应用程序的性能和响应速度。
- 点击按钮时触发某些操作： 使用防抖或节流函数可以防止用户在快速点击按钮时多次触发某些操作，从而提高应用程序的性能和响应速度。
总结
防抖和节流是 JavaScript 中常用的函数修饰器，它们可以有效地优化事件处理程序的执行频率，从而提高应用程序的性能和响应速度。防抖函数只在指定时间内只执行一次回调函数，而节流函数会在第一次事件触发时立即执行回调函数，然后在指定时间内忽略所有后续事件的触发，直到指定时间结束后才会再次执行回调函数。在实际项目中，防抖和节流都有着广泛的应用，如输入框输入文字时触发搜索或其他操作、滚动页面时触发某些操作、点击按钮时触发某些操作等。
