函數防抖，函數節流

30e8336b8229 發布于2019-08-22 15:37 / 2916人閱讀

摘要：函數防抖概念在事件被觸發秒后再執行回調，如果在這秒內又被觸發，則重新計時。應用場景給按鈕加函數防抖防止表單多次提交。對于輸入框連續輸入進行驗證時，用函數防抖能有效減少請求次數。

函數防抖(debounce)

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

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

應用場景

* 給按鈕加函數防抖防止表單多次提交。
* 對于輸入框連續輸入進行AJAX驗證時，用函數防抖能有效減少請求次數。
* 判斷scroll是否滑到底部，滾動事件+函數防抖

>  總的來說，適合多次事件一次響應的情況

函數代碼

function debounce(fn, wait) {
  let timer = null;
  return function () {
      const context = this
      const args = arguments
      if (timer) {
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args)
      }, wait)
  }
}

var fn = function () {
  console.log("boom")
}
// 滾動停止時候執行
window.onscroll = debounce(fn, 500)

函數節流(throttle)

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

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

應用場景

* 游戲中的刷新率
* DOM元素拖拽
* Canvas畫筆功能
 * DOM 元素的拖拽功能實現（mousemove）
 * 射擊游戲的 mousedown/keydown 事件（單位時間只能發射一顆子彈）
* 計算鼠標移動的距離（mousemove）
* Canvas 模擬畫板功能（mousemove）
* 搜索聯想（keyup）
* 監聽滾動事件判斷是否到頁面底部自動加載更多：給 scroll 加了 debounce 后，只有用戶停止滾動后，才會判斷是否到了頁面底部；如果是 throttle 的話，只要頁面滾動就會間隔一段時間判斷一次

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

函數代碼

function throttle(fn, gapTime) {
  // 定義上次時間為null
  let _lastTime = null
  return function() {
    // 獲取當前時間
    let _nowTime = +new Date()
    // 如果當前時間-上次時間>間隔時間 或 上次時間不存在
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      // 執行函數
      fn()
      // 重置上次時間為當前時間
      _lastTime = _nowTime
    }
  }
}

let fn = () => {
  console.log("boom")
}

window.onscroll = throttle(fn, 1000)

使用 debounce 和 throttle 以及常見的坑

不止一次地調用 debounce 方法：

// 錯誤
$(window).on("scroll", function() {
  debounce(doSomething, 300)
})
// 正確
$(window).on("scroll", debounce(doSomething, 200))

云服務器 GPU云服務器函數節流 js函數節流 VUE防抖與節流函數中定義函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93601.html

徹底弄懂函數防抖和函數節流

摘要：若時間差大于間隔時間，則立刻執行一次函數。不同點函數防抖，在一段連續操作結束后，處理回調，利用和實現。函數防抖關注一定時間連續觸發的事件只在最后執行一次，而函數節流側重于一段時間內只執行一次。原博客地址，歡迎star 函數防抖和節流函數防抖和函數節流：優化高頻率執行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評論0 收藏0
初探函數節流和函數防抖—以項目為例(更新es6語法)

摘要：而上述兩種方法，就叫做函數的節流和防抖。二函數節流和函數防抖函數節流函數節流函數節流是讓這個函數在間隔某一段時間執行一次。在這個項目中，我認為函數節流和函數防抖都能很好的解決問題。一項目需求最近在做一些小的練手代碼的時候，碰到了一個很常見的問題，當在搜索框中進行搜索的時候，如果快速輸入很多字符的話，搜索框的監聽回調函數會執行很多次，如果回調業務較復雜的話，可能會導致頁面運行緩慢甚...

趙連江 2019-08-20 17:03 評論0 收藏0
前端進擊的巨人（八）：淺談函數防抖與節流

摘要：隆重請出主角防抖與節流。防抖與節流的異同相同都是防止某一時間段內，函數被頻繁調用執行，通過時間頻率控制，減少回調函數執行次數，來實現相關性能優化。參考文章分鐘理解的節流防抖及使用場景函數防抖和節流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...

_Zhao 2019-08-23 15:37 評論0 收藏0
前端優化 —— 函數的節流和防抖

摘要：文件為函數要傳入的參數返回事件處理函數添加事件監聽節流函數一般用于事件的情況較多，因為這些事件的觸發是連續性的，需要在一個時間間隔內只觸發一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 閱讀原文前言在前端開發當中我們經常會綁定一些事件觸發的某些程序執行，有時這些事件會連續觸發，如瀏覽器窗口 s...

ralap 2019-08-23 12:18 評論0 收藏0
詳談js防抖和節流

摘要：本文會分別介紹什么是防抖和節流，它們的應用場景，和實現方式。防抖和節流都是為了解決短時間內大量觸發某函數而導致的性能問題，比如觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。本文由小芭樂發表 0. 引入首先舉一個例子：模擬在輸入框輸入后做ajax查詢請求，沒有加入防抖和節流的效果，這里附上完整可執行代碼：沒有防抖 ...

shevy 2019-08-23 13:54 評論0 收藏0
js 防抖節流 JavaScript

摘要：此時需要采用防抖和節流的方式來減少調用頻率，同時不影響原來效果。函數防抖當持續觸發事件時，一段時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前就觸發了事件，延時重新開始。 js 防抖節流 JavaScript 實際工作中，通過監聽某些事件，如scroll事件檢測滾動位置，根據滾動位置顯示返回頂部按鈕；如resize事件，對某些自適應頁面調整DOM的渲染；如ke...

int64 2019-08-23 14:48 評論0 收藏0