節流和防抖

這是前端面試中比較常見的一個問題，可能會讓你現場手寫。節流和防抖都是用來控制某些函式的呼叫頻率。舉個例子，在視窗resize的時候，由於可視區變大，我們可能需要向伺服器請求更多內容來填充可視區。但可視區變大的過程中，resize事件會被觸發多次...每次觸發都去請求一次的話沒有必要...這時就需要節流防抖來做控制

為什麼要節流.gif

functionresize(e){
console.log("視窗大小改變了");
}
window.addEventListener('resize',resize);

節流（throttle）

當resize事件被觸發後，指定時間內不允許再次觸發，面試時要是遇到手寫的話，可能會問到幾種實現方式

1. 時間戳版

節流時間戳版.gif

functionthrottle(func,delay){
varlast=0;
returnfunction(){
varnow=Date.now();
if(now>=delay+last){
func.apply(this,arguments);
last=now;
}else{
console.log("距離上次呼叫的時間差不滿足要求哦");
}
}
}

節流時間戳版執行.gif

2. 定時器版

functionthrottle(func,delay){
vartimer=null;
returnfunction(){
if(!timer){
func.apply(this,arguments);
timer=setTimeout(()=>{
timer=null;
},delay);
}else{
console.log("上一個定時器尚未完成");
}
}
}
 

節流定時器版執行.gif

無論上述哪種寫法，節流的意思就是函式在一段時間內的多次呼叫，僅第一次有效。

所以節流就像是一個看門大爺，每一段時間它只會放一個人進去

防抖（debounce）

防抖和節流不同的地方在於，函式在一段時間內的多次呼叫，僅使得最後一次呼叫有效。

functiondebounce(func,delay){
vartimeout;
returnfunction(){
clearTimeout(timeout);
timeout=setTimeout(()=>{
func.apply(this,arguments);
},delay);
}
}

所以防抖就像是PK賽裡的待定區，下一個待定的人會把上一個待定的人踢出局

原文