函數的防抖和節流

前言

在前端項目中，函數的防抖和節流應該算是身爲一名合格的前端工程師必須掌握的知識了。

函數的防抖和節流的是什麼

• 函數的防抖:事件完成某段固定的時長後執行相應的函數
• 函數的節流:事件執行期間每隔一段時間執行相應的函數
• 函數的防抖與節流的區別在我看來有點相似生活中快遞和外賣的區別：
  快遞：一天中任什麼時候間下的單通常都是晚上發貨（固定時長）
  外賣：下單後飯作好後（每隔一段時間）當即送餐

爲何要掌握防抖和節流

函數節流（throttle）與函數防抖（debounce）都是能夠限制函數的執行頻次，根據不一樣的場景來對執行頻率進行限制，避免了函數觸發頻率太高致使的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。

函數的防抖和節流應用實例與實現

• 防抖的應用

  1.防抖通常咱們在搜索過濾功能中應用較多，若是隻是監聽搜索框的變化來搜索那搜索的頻率會太高，致使頁面抖動。所以咱們須要限制搜索次數，等到輸入最後一次（也多是中間暫停的某次）間隔0.5秒後在執行搜索，這樣就能控制搜索的頻率了。

  2.表單重複提交

  3.滾動刷新
  實例代碼1：

var timer = null
   function debounce(fn,time){
        //觸發頻率小於500ms是則清除上次未執行的
        clearTimeout(time)
        setTimeout(function(){
            console.log('====執行=====')
            fn()
        },time)
   }
   //監聽搜索input change事件
   element.addEventListener("input", function(event) {
    debounce(searchFunc,500)
   })
   //搜索
   searchFunc(){
       console.log('====serch=====')
   }

實例代碼2-閉包實現：

//待完善

• 節流的應用

  1.canvas畫筆功能

  2.頁面元素的拖拽

  實例代碼1：

  var startTime = 0
  function throttle(fn,time){
      let nowTime = (new Date()).valueOf()
      if(nowTime-startTime > time){
          fn()
          startTime = nowTime
      }
  }
  
  document.addEventListener("mousemove",function(){
    //每隔1秒執行一次drag
     throttle(drag(),1000)
  });
  function drag(){
     console.log('=====執行=====')
  }

  實例代碼2-閉包實現：

  //待完善

總結

在頁面負載比較大的狀況下，如何減小對瀏覽器內存的消耗是前端優化的必需要考慮到的。而防抖與節流的概念可讓咱們極大的節約對瀏覽器內存的消耗，因此掌握防抖與節流是前端必備技能之一。