函數防抖與節流

前言

在前端開發過程當中常常會綁定一些頻繁觸發的事件，好比搜索框輸入，onmousemove,窗口大小變化等，當過於頻繁的觸發事件時，無疑會產生一些性能問題。更嚴重的可能致使程序崩潰。而函數防抖與函數節流則是解決這種問題的解決方案。

防抖

• 定義

對一個事件進行延遲觸發。若是在延遲期間又觸發了事件，延遲時間將從新計算。適用於輸入框的輸入觸發。

• 實現

function debounce(fun,time,...arg){
          let timer=null;
          return function(){
            clearTimeout(timer)
            setTimeout(() => {
              fun.call(this,...arg)
            }, time);
          }
        }
        function fun(a,b){
          console.log('觸發事件')
          console.log(a)
          console.log(b)
        }
        window.onload=function(){
          document.getElementById('div').addEventListener('click',debounce(fun,1000,1,2))
        }
複製代碼

只有當觸發事件後一秒內無再次觸發操做，函數纔會執行。

節流

• 定義

在一段時間頻繁觸發的事件,變爲n秒觸發一次,下降了觸發頻次。

• 實現

function throttle(fun,interval,...arg){
          let start=0
          return function(){
            let now=Date.now()
            if(now-start>interval){
              fun.call(this,...arg)
              start=now
            }
          }
        }
        function fun(a,b){
          console.log('觸發事件')
          console.log(a)
          console.log(b)
        }
        window.onload=function(){
          document.getElementById('div').addEventListener('click',throttle(fun,1000,1,2))
        }
複製代碼

不管多快的觸發事件，都會變成一秒觸發一次。

window.requsetAnimationFrame()

• 定義

官方解釋：

也就是說此方法會用瀏覽器的最佳渲染頻次進行方法調用。適用於動畫繪製（從名字上也能看的出來）。 觸發時間間隔 1000ms/60,約等於16.6ms每次。

使用：

window.requestAnimationFrame(()=>{
    console.log('我是一個16.6ms觸發一次的節流函數')
}))
複製代碼