首頁  >  文章  >  web前端  >  JavaScript中去抖與節流的詳細介紹(程式碼範例)

JavaScript中去抖與節流的詳細介紹(程式碼範例)

不言
不言轉載
2019-01-11 10:10:082917瀏覽

這篇文章帶給大家的內容是關於JavaScript中去抖與節流的詳細介紹(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

無論是面試或在討論瀏覽器最佳化過程中,都會涉及到去抖動和節流的問題。
總的來說,這二者是一種限制事件觸發頻率的方式。不同的是,節流會指定事件觸發的時間間隔;而去抖動會指定事件不觸發的時間間隔。從結果來看,節流降低了時間處理的敏感度;而去抖對從觸發事件先儲存起來,等到超過指定事件間隔後,一起發送。
越來越暈,直接上程式碼:
HTML

<input type="text" oninput="fatch()">

這裡有一個供用戶搜尋使用的input標籤,有一個input事件會觸發的處理函數fatch ,這個fatch會根據input的value值向後台去請求聯想詞。
上面程式碼思路是沒有問題的,但是如果不做觸發限制的話,可能會產生大量的http請求,而這些請求裡面很多可能意義不大,為我們的優化提供了空間;下面,我就採用節流和去抖兩種思路來解決這個問題。 (一般針對input這種情況,使用去抖解決;這裡只是方便做程式碼說明)

節流

function jieliu (func, time){//func 执行函数, time 时间间隔
  let lastRun = null
  
  return function(){
    const now = new Date()
    if(now - lastRun > time){
      func(...arguments)
      lastRun = now
    }
  }
}


const listener = jieliu(function(value){//监听函数,指定间隔时间
  console.log(value)
}, 1000)

const input = document.querySelector("input")
//调用方法
input.addEventListener("input", function(event){
     listener(event.target.value)
})

以上是比較簡單的節流實作以及基本的呼叫方式;使用閉包是為了保存每一次執行的lastRun。基本上實現了限制請求頻率的需求,但忽略了最後一個的觸發。
改進如下:

function jieliu (func, time){// 触发时间间隔>time 发送请求
  let lastRun = null
  let timeout = undefined
  return function(){
    const self = this; 
    const now = new Date()
    if(now - lastRun > time){
      if(timeout){
        clearTimeout(timeout)
        timeout = undefined
      }
      func.apply(self, arguments)
      lastRun = now
    }
    else{
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
    }
  }
}

加入timeout,判斷是否是最後一次請求。

去抖動

function qudou(func, time){
  let timeout = undefined
  
  return function(){
    const argu = arguments
    const self = this

    if(timeout){
      clearTimeout(timeout)
      timeout = undefined
    }else{
        timeout = setTimeout(func.apply(this, arguments), time)
    }
  }
}

以上簡單實作去抖動,同樣,最後一次事件不能夠觸發處理函數。

改進如下:

function qudou(func, time){//判断连续time时间内不触发,发送func请求
  let timeout = undefined;
  let lastRun = null
  return function(){
    const self = this
    const now = new Date()
    if(now - lastRun > time){
      func.apply(self, arguments)
    }
    else {
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
      else {
        clearTimeout(timeout)
        timeout = undefined
      }
    }
    lastRun = new Date()
  }
}

總結

通篇寫下來,節流主要的實現方式還是透過對比“now”與“lastRun”的時間差,進而減少處理函數的呼叫次數;而防手震還是透過settimeout來延緩處理函數的呼叫時機,進而把多次觸發的結果總結一起呼叫處理函數。


以上是JavaScript中去抖與節流的詳細介紹(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除