函式防抖和函式節流

場景：在做商城時，有商品的搜尋功能，在商品搜尋輸入框中輸入一次，伺服器就會去校驗。輸入一個字元就傳送一次請求，這樣直觀的就會導致效能差。

防抖和節流都是控制事件觸發的頻率。

防抖 debounce

觸發高頻率事件n秒後函式只會執行一次，如果n秒內高頻時間再次觸發就會重新計算時間。

特點：多次觸發不執行，不觸發之後一段時間再執行。

案例：

獲取搜尋結果
getQueryTitle(query){
  url:"",
  data:{
    query
 }

}
 

實現方法：

每次觸發事件時設定一個延時呼叫函式，並取消之前的延時呼叫方法。

手寫簡單防抖函式

 
function debounce(fn,delay) {
     let timeout = null;
     return function() {
     clearTimeout(timeout); //清楚上一次時間函式
     timeout = setTimeout(() => {   //重置延時時間函式
         fn.apply(this);
    },delay)
 }
}

參考：https://www.jianshu.com/p/c8b86b09daf0

立即執行版本和非立即執行版本

節流 throttle

高頻事件觸發，但是在n秒內只會執行一次

特點：多次觸發並不會執行，到了一定時間後在執行。

手寫簡單節流函式

function throttle(fn,delay){
let lastTime=0;//最後一次執行時間
return function(){
let nowTime=Date.now(); //現在時間
if(lastTime-nowTime>delay){
fn.apply(this);
lastTime=nowTime; //同步時間
}
}
}

參考：https://www.jianshu.com/p/c8b86b09daf0

時間戳版本和定時器版本