防抖(debounce)和节流(throttle)是两种不同的优化方法,它们都是为了控制函数的执行频率。
防抖函数的目的是在一定时间内,多次调用函数只执行一次。
原理:通过延迟函数的执行,直到一段时间后没有新的调用请求,才执行函数。
应用场景:搜索框输入时的自动搜索功能,窗口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);
};
}
节流函数的目的是在一定时间内,按照固定的频率执行函数。
原理:通过维护一个定时器,每隔一定时间执行一次函数。
应用场景:滚动事件的处理函数,窗口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 删除。