函式

防抖

所謂防抖，就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。

let box = document.getElementById('box');

let timer = 0

box.onclick = function () {

    clearTimeout(timer)

    timer = setTimeout(() => {

        console.log(1)

    }, 1000)

}

函式防抖的應用場景，最常見的就是使用者註冊時候的手機號碼驗證和郵箱驗證了。只有等使用者輸入完畢後，前端才需要檢查格式是否正確，如果不正確，再彈出提示語。

函式

節流

所謂節流，就是指連續觸發事件但是在 n 秒中只執行一次函式。

let box = document.getElementById('box');

let timer = 0

    box.onclick = function () {

    if (!timer) {

        timer = setTimeout(() => {

            timer = 0

            console.log(1)

        }, 1000)

    }

}

函式節流應用的實際場景，多數在監聽頁面元素滾動事件的時候會用到。因為滾動事件，是一個高頻觸發的事件。

總結

函式節流是指一定時間內js方法只跑一次。比如人的眨眼睛，就是一定時間內眨一次。這是函式節流最形象的解釋。

函式防抖是指頻繁觸發的情況下，只有足夠的空閒時間，才執行程式碼一次。比如生活中的坐公交，就是一定時間內，如果有人陸續刷卡上車，司機就不會開車。只有別人沒刷卡了，司機才開車。