前端中的防抖和節流

一、背景

在日常使用中，用戶在進行搜索時，沒輸入一個字就會觸發介面請求，這樣就會造成網路請求繁忙；用戶在下拉滾動調的時候，由於速度過快也會造成頻繁觸發介面調用。

二、防抖

防抖，顧名思義，防止抖動。用於將用戶的操作行為觸發轉換為程式行為觸發，防止用戶操作的結果抖動。一段時間內，事件在我們規定的間隔 n 秒內多次執行，回調只會執行一次。

 1 /**
 2  * 防抖
 3  * @param {function} fn 
 4  * @param {number} delay 
 5  */
 6 function debounce(fn, delay = 500){
 7     let timer = null
 8     return function(){
 9         if(timer) {
10             clearTimeout(timer)
11         }
12         timer = setTimeout(()=>{
13             fn.apply(this, arguments)
14             clearTimeout(timer)
15         },delay)
16     }
17 }

三、節流

節流，顧名思義，控制流量。用於用戶在與頁面交互時控制事件發生的頻率，一般場景是單位的時間或其它間隔內定時執行操作。一段時間內，事件在每次到達我們規定的間隔 n 秒時觸發一次。

 1 /**
 2  * 節流
 3  * @param {function} fn 
 4  * @param {number} delay 
 5  */
 6 function throttle(fn, delay = 100){
 7     let timer = null
 8     return function(){
 9         if(timer) return
10         timer = setTimeout(()=>{
11             fn.apply(this, arguments)
12             timer = null
13         }, delay)
14     }
15 }