函數的防抖和節流

防抖和節流的目的都是爲了減小沒必要要的計算，不浪費資源，只在適合的時候再進行觸發計算。

 1、函數節流

函數節流定義：

一個函數執行一次後，只有大於設定的執行週期後纔會執行第二次

有個須要頻繁觸發函數，處於優化性能角度，在規定時間內，只讓函數觸發的第一次生效，後面不生效

函數節流的原理：

用時間戳來判斷是否已到回調該執行時間，記錄上次執行的時間戳，而後每次觸發 scroll 事件執行回調，回調中判斷當前時間戳距離上次執行時間戳的間隔是否已經到達 規定時間段，若是是，則執行，並更新上次執行的時間戳

實際使用場景 ：

典型的案例就是鼠標不斷點擊觸發，規定在n秒內屢次點擊只有一次生效。

resize、scroll、mousemove等事件觸發監聽

實例代碼：

<script>
    /*fn：要被節流的函數   delay：規定的時間 */ 
function throttle(fn,delay) { 

//記錄上一次函數 觸發的時間 
　　var lastTime=0; 
　　return function () { 
　　　　//當前函數 觸發的時間 
　　　　var nowTime=Date.now(); 
　　　　//閉包中使用lastTime變量，閉包會始終將變量的值保存在內存中 
　　　　if(nowTime-lastTime>delay){ 
　　　　fn(); 
　　　　//同步時間 lastTime=nowTime;
　　　　  } 
 　　} 
}
　　//實例：每隔200ms觸發一次節流函數
    document.onscroll=throttle(function () {
        console.log("scroll事件被觸發了"+Date.now());
    },200)
</script>

2、函數防抖

函數防抖：

一個須要頻繁觸發的函數，在規定時間內，只讓最後一次生效，前面的不生效

實現原理：

函數防抖的基本思想是設置一個定時器，在指定時間間隔內運行代碼時清楚上一次的定時器，並設置另外一個定時器，知道函數請求中止並超過期間間隔纔會執行。

實際應用場景：

典型的案例就是輸入搜索：輸入結束後n秒才進行搜索請求，n秒內又輸入的內容，就從新計時。

代碼實現：

<script>
   //fn：須要防抖的函數    
   //防抖須要不停地清除計時器，最後在計時器結束後觸發fn來達到效果。

 function debounce(fn,delay) {
        //記錄上一次的延時器
        var timer=null;
        return function () {
            //清除上一次延時器
            clearTimeout(timer)
            //從新設置 新的延時器
            timer=setTimeout(function () {
                fn.apply(this);
            },delay)
        }
    }
    //test
    document.getElementById('btn').onclick=debounce(function () {
        console.log('點擊事件被觸發了'+Date.now())
    },1000)
</script>

轉載：

做者：fozero

文章出處：https://www.cnblogs.com/fozero