初探函數節流和函數防抖—以項目為例(更新es6語法)

趙連江發布于2019-08-20 17:03 / 3580人閱讀

摘要：而上述兩種方法，就叫做函數的節流和防抖。二函數節流和函數防抖函數節流函數節流函數節流是讓這個函數在間隔某一段時間執行一次。在這個項目中，我認為函數節流和函數防抖都能很好的解決問題。

一項目需求

最近在做一些小的練手代碼的時候，碰到了一個很常見的問題，當在搜索框中進行搜索的時候，如果快速輸入很多字符的話，搜索框的監聽回調函數會執行很多次，如果回調業務較復雜的話，可能會導致頁面運行緩慢甚至是奔潰，那么我們如何解決這個問題呢，讓輸入框在不在輸入的情況下執行回調，或者每間隔一段時間執行一次回調都可以解決這一問題。而上述兩種方法，就叫做函數的節流和防抖。

二函數節流和函數防抖 2.1 函數節流

函數節流：函數節流是讓這個函數在間隔某一段時間執行一次。以輸入框為例，假設你想查詢xxxx,你想實現當我開始輸入多少秒之后，執行查詢操作。（并不一定要輸入完畢）
想看效果請點擊這里

2.2 函數防抖

函數防抖：函數防抖是讓這個函數在執行上一次之后過了你規定的時間再執行的一種方法。以輸入框為例，假設你要查詢xxxx，你想實現當我輸完了xxxx之后，再進行查詢操作，那么你就需要用到函數防抖。
經典的函數防抖實踐如下：

function throttle(method,context){
  clearTimeout(method.tId)
  method.tId = setTimeout(function(){
    method.call(context) 
   },1000)
}

想看效果請點擊這里

三最佳實踐

通過上敘的描述，我們對于函數防抖和函數節流有了一定的認識。在這個項目中，我認為函數節流和函數防抖都能很好的解決問題。所以這里把函數節流和函數防抖封裝在了一個函數里，通過第三個參數切換模式。代碼如下

const throttle = function(fn, delay, isDebounce) {
  let timer
  let lastCall = 0
  return function (...args) {
    if (isDebounce) {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn(...args)
      }, delay)
    } else {
      const now = new Date().getTime()
      if (now - lastCall < delay) return
      lastCall = now
      fn(...args)
    }
  }
}

通過第三個參數，可以控制到底使用函數防抖還是函數節流。

四總結

函數防抖實現的核心在于每次都去clear一個延時器，然后每次執行函數的時候，都去clear以前的延時器。只有當你中斷輸入的時候，才會去執行相應回調。而函數節流的核心是去判斷當前時間和開始時間的間隔是否到達了設置的delay值，如果達到了，就執行一次回調。沒有則不執行。

云服務器 GPU云服務器函數節流 js函數節流 VUE防抖與節流服務器更新時間函數

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

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

前端常用代碼片段(三)

摘要：可以是數字或者是字符串如果是數字則表示屬性名前加上空格符號的數量，如果是字符串，則直接在屬性名前加上該字符串。最后更新于2019年1月13日前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里前端常用代碼片段(五) 點這里前端常用代碼片段(六) 點這里 1.打亂數組中元素順序（類似音樂隨機播放） function...

U2FsdGVkX1x 2019-08-21 16:25 評論0 收藏0
H5學習

摘要：為此決定自研一個富文本編輯器。本文，主要介紹如何實現富文本編輯器，和解決一些不同瀏覽器和設備之間的。對ES6Generator函數的理解 Generator 函數是 ES6 提供的一種異步編程解決方案，語法行為與傳統函數完全不同。 JavaScript 設計模式 ② 巧用工廠模式和創建者模式我為什么把他們兩個放在一起講？我覺得這兩個設計模式有相似之處，有時候會一個設計模式不能滿...

aristark 2019-08-22 11:21 評論0 收藏0
JavaScript專題系列20篇正式完結！

摘要：寫在前面專題系列是我寫的第二個系列，第一個系列是深入系列。專題系列自月日發布第一篇文章，到月日發布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。寫在前面 JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。 JavaScript 專題系列共計 20 篇，主要研究日常開發中一些功能點的實現，比如防抖、節流、去重、類型判斷、拷貝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 評論0 收藏0
函數防抖Debounce和函數節流Throttle

摘要：函數節流函數防抖函數節流和函數防抖函數節流和函數防抖二者很容易被混淆起來。函數防抖函數在特定的時間內不被再調用后執行。一句話概括函數節流是從用戶開始輸入就開始計時，而函數節流是從用戶停止輸入開始計時。函數節流 & 函數防抖函數節流和函數防抖函數節流和函數防抖二者很容易被混淆起來。下面貼英文原文，建議認真閱讀：Debouncing enforces that a function ...

NicolasHe 2019-08-22 15:23 評論0 收藏0