在JS中有關函數節流和函數防手震（詳細教學）

這篇文章主要介紹了JS函數節流和函數防手震問題分析，非常不錯，具有參考借鑒價值,需要的朋友可以參考下

#問題1：如果實現了dom拖曳功能，但是在綁定拖曳事件的時候發現每當元素稍微移動一點便觸發了大量的回調函數，導致瀏覽器直接卡死，這個時候怎麼辦？

 

**問題2：**如果給一個按鈕綁定了表單提交的post事件，但是使用者有些時候在網路狀況極差的情況下多次點擊按鈕造成表單重複提交，如何防止多次提交的發生？

為了回應如上場景，便出現了函數防手震和函數節流兩個概念，總的來說：

這兩個方法是在時間軸上控制函數的執行次數。

函數防手震(debounce)

#概念： 在事件觸發n秒後再執行回調，如果在這n秒內又被觸發，則重新計時。

生活中的實例： 如果有人進電梯（觸發事件），那電梯將在10秒鐘後出發（執行事件監聽器），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。

函數節流(throttle)

#概念： 規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回呼函數執行，如果在同一個單位時間內某事件被觸發多次，只有一次能生效。

生活中的實例： 我們知道目前的一種說法是當1 秒內連續播放24 張以上的圖片時，在人眼的視覺中就會形成一個連貫的動畫，所以在電影的播放（以前是，現在不知道）中基本上是以每秒24 張的速度播放的，為什麼不100 張或更多是因為24 張就可以滿足人類視覺需求的時候，100 張就會顯得很浪費資源。

分析圖

假設，我們觀察的總時間為10秒鐘，規定1秒為一次事件的最小間隔時間。

如果觸發事件的頻率是0.5s/次，那麼函數防手震如圖

 

因為總是沒法等一秒鐘就被再次觸發了，所以最終沒有一次事件是成功的。

函數節流如圖

 

因為控制了最多一秒一次，頻率為0.5s/次，所以每一秒鐘就有一次事件作廢。最終控製成1s/次

如果觸發事件的頻率是2s/次，那麼

函數防手震如圖

 

因為2s/次
已經大於了規定的最小時間，所以每計時兩秒便觸發一次。

函數節流如圖

 

同樣， 2s/次 大於了最小時間規定，所以每一次觸發都生效。

應用場景

對於函數防手震，有以下幾個應用程式場景：

• 為按鈕加函數防手震防止表單多次提交。

• 對於輸入框連續輸入進行AJAX驗證時，用函數防手震能有效減少請求次數。

• 判斷scroll 是否滑到底部， 捲動事件函數防手震

總的來說，適合多次事件一次回應的狀況

對於函數節流，有以下幾個場景：

• 遊戲中的刷新率

• DOM元素拖曳

• Canvas畫筆功能

總的來說，適合大量事件按時間做平均分配觸發。

原始碼

函數防手震：

function debounce(fn, wait) {
 var timer = null;
 return function () {
  var context = this
  var args = arguments
  if (timer) {
   clearTimeout(timer);
   timer = null;
  }
  timer = setTimeout(function () {
   fn.apply(context, args)
  }, wait)
 }
}
var fn = function () {
 console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次
setInterval(debounce(fn,2000),1000) // 不会触发一次（我把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条）

之所以回傳一個函數，因為防手震本身比較像是個函數修飾，所以就做了一次函數柯里化。裡面也用到了閉包，閉包的變數是 timer 。

函數節流

function throttle(fn, gapTime) {
 let _lastTime = null;
 return function () {
 let _nowTime = + new Date()
 if (_nowTime - _lastTime > gapTime || !_lastTime) {
  fn();
  _lastTime = _nowTime
 }
 }
}
let fn = ()=>{
 console.log('boom')
}
setInterval(throttle(fn,1000),10)

如圖是實現的一個簡單的函數節流，結果是一秒打出一次boom

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

在js中如何實作將陣列新增到物件中

使用gulp如何建立完整的專案流程

在vue中使用axios實作檔案上傳

在JavaScript中如何實作圖片變大

以上是在JS中有關函數節流和函數防手震（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！