防抖和节流的区别
原创防抖和节流的区别
原创
挥刀北上
发布于 2024-04-02 16:02:16
发布于 2024-04-02 16:02:16
防抖（debounce）和节流（throttle）是两种不同的优化方法，它们都是为了控制函数的执行频率。
- 防抖（debounce）
防抖函数的目的是在一定时间内，多次调用函数只执行一次。
原理：通过延迟函数的执行，直到一段时间后没有新的调用请求，才执行函数。
应用场景：搜索框输入时的自动搜索功能，窗口resize、scroll事件的处理函数等。
function debounce(func, wait) {
let timeout = null;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
}- 节流（throttle）
节流函数的目的是在一定时间内，按照固定的频率执行函数。
原理：通过维护一个定时器，每隔一定时间执行一次函数。
应用场景：滚动事件的处理函数，窗口resize事件的处理函数等。
function throttle(func, wait) {
let lastTime = 0;
return function() {
const context = this;
const args = arguments;
const now = new Date().getTime();
if (now - lastTime > wait) {
func.apply(context, args);
lastTime = now;
}
};
}总结：
- 防抖函数适用于需要在一定时间内只执行一次的场景，在这段时间内如果多次调用后面调用的会将前面调用的取消只执行最后一次，如搜索框输入时的自动搜索功能。
- 节流函数适用于需要按照固定频率执行的场景，在固定时间段内，多次调用，只有满足时间长度的才会执行，如滚动事件的处理函数。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读