JavaScript防抖与节流函数怎么写？高频事件优化技巧详解

魁首哥

作者

在前端开发中，滚动、输入等高频事件若直接绑定回调，常导致页面卡顿。此时，防抖与节流是关键的性能优化手段——防抖“等用户停手再执行”，节流“按固定间隔强制执行”。本文ZHANID工具网将详细解析防抖与节流函数的自定义实现逻辑，结合滚动、输入等高频场景，教你用这两项技术轻松解决性能痛点，提升页面流畅度。

一、为什么需要防抖与节流？

在Web开发中，我们经常需要处理高频触发的事件，例如：

窗口的resize事件
滚动条的scroll事件
输入框的input或keyup事件
鼠标移动的mousemove事件

高频事件直接绑定处理函数会导致性能问题：假设我们有一个搜索框，每次输入都触发AJax请求，用户快速输入"javascript"时，会触发8次请求（包括删除操作），这不仅浪费服务器资源，还会造成页面卡顿。

防抖(debounce)和节流(throttle)是两种优化高频事件的技术方案，它们通过限制函数执行频率来提升性能。

二、防抖(Debounce)原理与实现

1. 防抖的核心思想

防抖是指触发事件后，在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。就像电梯关门：

电梯不会立即关门，而是等待一段时间（比如10秒）
如果这段时间内又有人进入，则重新计时
只有超时后无人进入，电梯才会关门

2. 基础实现

functiondebounce(fn,delay){
lettimer=null;
returnfunction(...args){
//清除之前的定时器
if(timer)clearTimeout(timer);
//设置新的定时器
timer=setTimeout(()=>{
fn.apply(this,args);
},delay);
};
}

3. 立即执行版防抖

有时我们希望第一次触发立即执行，之后停止触发n秒后才允许再次执行：

functiondebounceImmediate(fn,delay){
lettimer=null;
returnfunction(...args){
if(!timer){
fn.apply(this,args);//立即执行
}
//清除之前的定时器
clearTimeout(timer);
//设置新的定时器
timer=setTimeout(()=>{
timer=null;//执行后清除timer
},delay);
};
}

4. 防抖应用场景

搜索框输入联想（用户停止输入后发送请求）
窗口大小调整（resize结束时计算布局）
表单验证（用户停止输入后验证）
按钮连续点击防护（防止重复提交）

5. 防抖实现要点

定时器管理：每次触发事件时清除之前的定时器
上下文保持：使用apply确保回调函数中的this指向正确
参数传递：通过...args收集所有参数并传递给回调函数
返回值处理：如果需要返回值，可以返回一个Promise或添加回调

三、节流(Throttle)原理与实现

1. 节流的核心思想

节流是指连续触发事件但在n秒中只执行一次函数。就像水龙头：

水龙头不会一直流水，而是间隔一段时间（比如5秒）流一次
无论你如何频繁地开关水龙头，水流速度都是恒定的

2. 时间戳版实现

functionthrottle(fn,delay){
letlastTime=0;
returnfunction(...args){
constnow=Date.now();
if(now-lastTime>=delay){
fn.apply(this,args);
lastTime=now;
}
};
}

3. 定时器版实现

functionthrottleTimer(fn,delay){
lettimer=null;
returnfunction(...args){
if(!timer){
timer=setTimeout(()=>{
fn.apply(this,args);
timer=null;//执行后清除timer
},delay);
}
};
}

4. 混合版实现（推荐）

结合时间戳和定时器的优点，首次立即执行，最后一次也会执行：

functionthrottleHybrid(fn,delay){
letlastTime=0;
lettimer=null;
returnfunction(...args){
constnow=Date.now();
constremaining=delay-(now-lastTime);

if(remaining{
fn.apply(this,args);
lastTime=Date.now();
timer=null;
},remaining);
}
};
}

5. 节流应用场景

滚动加载更多（scroll事件）
鼠标移动事件（mousemove）
游戏中的实时计算（如角色移动）
DOM元素的拖拽（drag）
射击游戏中的连续射击（限制发射频率）

6. 节流实现要点

时间控制：确保函数执行间隔不小于设定值
首次执行：根据需求决定是否立即执行
末次执行：确保停止触发后能执行最后一次
性能优化：定时器版比时间戳版性能更好（少比较操作）

四、防抖与节流的对比

特性	防抖(Debounce)	节流(Throttle)
执行时机	停止触发后延迟执行	固定时间间隔执行
执行次数	0或1次（取决于触发间隔）	多次（按固定频率）
类似场景	电梯关门	水龙头滴水
内存管理	需要清除定时器	需要清除定时器
参数传递	需要保留所有触发参数	需要保留所有触发参数

选择建议：

需要等待用户停止操作后执行 → 防抖
需要均匀间隔执行 → 节流
既需要首次响应又需要限制频率 → 混合版节流

五、高级实现技巧

1. 添加取消功能

functiondebounceCancelable(fn,delay){
lettimer=null;
constdebounced=function(...args){
if(timer)clearTimeout(timer);
timer=setTimeout(()=>{
fn.apply(this,args);
},delay);
};

debounced.cancel=function(){
if(timer){
clearTimeout(timer);
timer=null;
}
};

returndebounced;
}

//使用示例
constmyDebounce=debounceCancelable(()=>console.log('Debounced!'),500);
window.addEventListener('resize',myDebounce);
//需要取消时
//myDebounce.cancel();

2. 添加立即执行选项

functiondebounceWithOptions(fn,delay,options={}){
lettimer=null;
const{leading=false,trailing=true}=options;
letlastArgs=null;
letlastThis=null;

functioninvoke(){
fn.apply(lastThis,lastArgs);
timer=null;
}

returnfunction(...args){
lastArgs=args;
lastThis=this;

if(timer&&!leading){
clearTimeout(timer);
}

constshouldInvokeNow=leading&&!timer;

if(shouldInvokeNow){
invoke();
}elseif(trailing){
timer=setTimeout(invoke,delay);
}
};
}

3. 节流的leading/trailing控制

functionthrottleAdvanced(fn,delay,options={}){
letlastTime=0;
lettimer=null;
const{leading=true,trailing=true}=options;

returnfunction(...args){
constnow=Date.now();
constshouldInvokeNow=leading&&(now-lastTime>=delay);
constremaining=delay-(now-lastTime);

if(shouldInvokeNow){
lastTime=now;
fn.apply(this,args);
}elseif(trailing&&!timer){
timer=setTimeout(()=>{
lastTime=Date.now();
timer=null;
fn.apply(this,args);
},remaining);
}
};
}

六、实际项目中的应用

1. 搜索框防抖

classSearchBox{
constructor(){
this.input=document.getElementById('search');
this.debouncedSearch=this.debounce(this.fetchResults,300);
this.init();
}

init(){
this.input.addEventListener('input',(e)=>{
this.debouncedSearch(e.target.value);
});
}

debounce(fn,delay){
lettimer=null;
returnfunction(...args){
if(timer)clearTimeout(timer);
timer=setTimeout(()=>{
fn.apply(this,args);
},delay);
};
}

fetchResults(query){
if(!query.trim())return;
console.log(`Fetchingresultsfor:${query}`);
//实际项目中这里会是fetch/axios请求
}
}

newSearchBox();

2. 滚动加载节流

classInfiniteScroll{
constructor(){
this.container=document.getElementById('container');
this.throttledScroll=this.throttle(this.handleScroll,200);
this.init();
}

init(){
window.addEventListener('scroll',this.throttledScroll);
}

throttle(fn,delay){
letlastTime=0;
returnfunction(...args){
constnow=Date.now();
if(now-lastTime>=delay){
fn.apply(this,args);
lastTime=now;
}
};
}

handleScroll(){
const{scrollTop,clientHeight,scrollHeight}=document.documentElement;
if(scrollTop+clientHeight>=scrollHeight-50){
console.log('Loadingmoreitems...');
//实际项目中这里会加载更多数据
}
}
}

newInfiniteScroll();

3. 表单验证混合方案

classFormValidator{
constructor(){
this.form=document.getElementById('myForm');
this.usernameInput=document.getElementById('username');
this.debouncedValidate=this.debounce(this.validateUsername,500);
this.throttledKeyup=this.throttle(this.onKeyup,200);
this.init();
}

init(){
this.usernameInput.addEventListener('input',this.throttledKeyup);
this.usernameInput.addEventListener('blur',this.debouncedValidate);
}

debounce(fn,delay){
lettimer=null;
returnfunction(...args){
if(timer)clearTimeout(timer);
timer=setTimeout(()=>{
fn.apply(this,args);
},delay);
};
}

throttle(fn,delay){
letlastTime=0;
returnfunction(...args){
constnow=Date.now();
if(now-lastTime>=delay){
fn.apply(this,args);
lastTime=now;
}
};
}

onKeyup(){
//实时反馈（如字符计数）
constlen=this.usernameInput.value.length;
console.log(`Currentlength:${len}`);
}

validateUsername(value=this.usernameInput.value){
//复杂验证逻辑
if(!value){
console.log('Usernameisrequired');
returnfalse;
}
if(value.length{
console.timeEnd('debounce');
console.log('Debouncedfunctionexecuted');
},500);

//快速触发
for(leti=0;idebouncedFn(),i*100);
}
}

//节流测试
functiontestThrottle(){
console.time('throttle');
constthrottledFn=throttle(()=>{
console.log('Throttledfunctionexecuted');
},500);

//持续触发
conststart=Date.now();
while(Date.now()-start{
if(!controller.signal.aborted){
fn.apply(this,args);
}
},delay);
};
}

//需要取消时
//controller.abort();