如今，先忘了 "函數防抖" 和 "函數節流" 吧

前言

一開始接觸這兩個概念的時候，並非十分明白這兩個單詞的語義，也不清楚到底這是幹什麼用的。相信不少人也跟我同樣，若是沒有的話，那就尷尬了。

聲明：這個標題的意思是想讓你們忘掉概念，從業務場景上介紹在什麼樣的狀況下能夠怎樣作，不被這兩個術語糾結住，不爲了學而學。 並非讓你忘記這兩個概念對應的實質內容，不必糾結忘不忘。

函數防抖

暫時忘掉函數防抖。

先有需求再有解決方案，先來描述一個簡單的業務場景：

如今要實現一個文章雲端緩存功能，若是用戶每輸入一個字符就調用接口同步緩存一次的話，這樣服務器的壓力會比較大。

並且多個接口順序發送出去，服務端不必定是按照這個順序收到的，可能會致使儲存的內容並非最新的內容。

這時候，就須要選擇一個時機去調用接口而不是每次都調用，這個時機能夠選擇在用戶中止輸入的時候。

那咱們怎麼知道用戶已經中止輸入了呢？

若是N秒內輸入框的內容沒有發生改變，咱們就能夠認爲用戶中止輸入或者暫停輸入了。

let timer;
    const input = document.querySelector('input');

    input.addEventListener('input', function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            // 執行具體代碼
        }, 500)
    })
複製代碼

看演示：

據觀察，在掘金髮布文章的時候，自動保存至草稿的功能也是相似的實現方法，你們能夠試試

函數節流

暫時忘掉函數節流。

再來描述一個簡單的業務場景：

如今要實現一個點讚的功能，某個用戶發佈了一個動態，你們能夠給他無限點贊，也就是說每一個點贊後端都要記錄下來。理論上來說用戶每點贊一次調用一次接口便可。可是一樣的，和上面同樣，這樣對服務器的壓力會比較大。

無限點贊是指，用戶的每一個點擊都是一個有效的贊，是須要累計的。能夠理解爲咱們要作一個點贊排行榜，根據每一個用戶的點贊數排序。

這時候，咱們能夠經過限制頻率的方式來緩解這個狀況，好比說點擊按鈕後300毫秒後再調用接口，在這300毫秒期間全部的點擊都會被累計。

// 點贊數
    let likes = 0;
    // 定時器標識
    let timer;
    
    /*
    * 用戶點贊函數
    * */
    function clickButton() {
        likes++;
        
        if ( timer ) return;
        
        timer = setTimeout(() => {
            // 執行網絡請求
            // ajax...
            
            // 點贊數重置
            likes = 0;
            
            // 重置timer
            timer = null;
        }, 300)
    }
複製代碼

看演示：

總結

相似於這種處理某些情景下的技術方案，對於術語並非很重要，這基本上只對於溝通上你們都知道在說啥。

關鍵是先清楚爲何要這麼作。