函數的節流和函數的防抖

ThreeWords 發布于2019-08-22 16:20 / 3386人閱讀

摘要：函數的節流和函數的防抖都是優化高頻率執行的函數的一種方法。思路第一次調用的時候創建一個定時器，在指定的間隔時間之后運行代碼，當第二次調用該函數時，清除前一次的定時器并另設置一個。

函數的節流和函數的防抖都是優化高頻率執行的函數的一種方法。我們知道瀏覽器中某些計算和處理要比其他昂貴很多。比如DOM的操作。當一個操作dom的函數高頻率執行時，我們可以根據情況進行節流或防抖的處理。

節流函數

在每個時間段里，最多只允許運行一次。比如說resize調整窗口，在調整窗口的過程中，事件一直在高頻率的觸發，我們可以利用節流函數讓其在一定的間隔時間段內最多觸發一次。用一個形象的比喻吧。生產線上的啤酒瓶排成隊往前跑，一個行動遲緩的樹懶，每一段時間內只能拿到一個瓶子。

思路：第一次調用的時候記錄一下時間戳，之后每次運行的時候都和上一次調用的時候的時間戳比較差值，當差值大于等于某個值的時候才執行。

function throttle (action, delay) {
  let timeout = null
  let lastRun = 0
  return function () {
    if (timeout) {
      return
    }
    let elapsed = Date.now() - lastRun
    let context = this
    let args = arguments
    let runCallback = function () {
      lastRun = Date.now()
      timeout = false
      action.apply(context, args)
    }
    if (elapsed >= delay) {
      runCallback()
    } else {
      timeout = setTimeout(runCallback, delay)
    }
  }
}

防抖函數

在高頻調用中，只有足夠的空閑時間，代碼才會執行一次，常見的就是input的change事件，只有停頓輸入的事件大于指定的時間，代碼才會執行一次。用一個形象的比喻吧。生活中的聲控燈，只要你不停的說話，燈就不會熄滅，只有你安靜的時間大于一定的值時，燈才會熄滅。

思路：第一次調用的時候創建一個定時器，在指定的間隔時間之后運行代碼，當第二次調用該函數時，清除前一次的定時器并另設置一個。如果前一個定時器已經執行了，這個操作就沒任何意義，如果前一個定時器還沒執行，其實就是將其替換為一個新的定時器。目的是只有在執行函數的請求停止了一段時間之后才執行。根據以上思路實現一個防抖函數。

function debounce(action, content, delay){
    let timeoutId = null;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function(){
            action.apply(content);
        }, delay);
    }
}

GPU云服務器云服務器函數節流 js函數節流 VUE防抖與節流存儲過程和函數的區別

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

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

說說JavaScript中函數的防抖 (Debounce) 與節流 (Throttle)

摘要：基礎防抖我們現在寫一個最基礎的防抖處理標記事件也做如下改寫現在試一下，我們會發現只有我們停止滾動秒鐘的時候，控制臺才會打印出一行隨機數。為何要防抖和節流有時候會在項目開發中頻繁地觸發一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實時搜索功能，我們知道如果事件處理函數無限制調用，會大大加重瀏覽器的工作量，有可能導致頁面卡頓影響體驗；后臺...

yanwei 2019-08-23 18:10 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

leoperfect 2019-08-23 13:53 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

Yangder 2019-08-02 12:10 評論0 收藏0
函數的防抖和節流是個啥？？？

摘要：函數防抖和節流，都是控制事件觸發頻率的方法。封裝一個函數，讓持續觸發的事件監聽是我們封裝的這個函數，將目標函數作為回調傳進去，等待一段時間過后執行目標函數第二點實現了，再看第一點持續觸發不執行。曾經面試時候被問到過這個，年少的我一臉無知。。。后來工作中遇到了一個場景：輸入名稱的同時去服務器校驗名稱是否重復，但發現之前的代碼竟然都沒做限制，輸入一次發一次請求。簡直忍不了，就在項目的u...

edagarli 2019-08-23 18:35 評論0 收藏0
函數的防抖和節流

摘要：當持續觸發事件的時候，函數是完全不執行的，等最后一次觸發結束的一段時間之后，再去執行原理第一次調用函數創建一個定時器，指定的時間間隔后運行代碼。第二次調用函數時，它會清除前一次的定時器并設置另一個。目的：節約性能開銷，避免多次頻繁的觸發業務邏輯造成頁面卡頓。應用場景：節流和防抖的核心其實就是限制某一個方法被頻繁觸發，比如說DOM事件的監聽回調，input的keyup、keydown...

MasonEast 2019-08-26 14:00 評論0 收藏0