函數的防抖和節流

昨天坐公交，人剛上完，死機一jio油門，我就摔了跤，我很生氣。這件事讓我回想起了上次看到的關於防抖的文章，如今本身再來講一遍，也算是加深認識吧。

防抖

什麼是防抖，舉個司機踩油門的栗子就是，每次有有乘客上來死機要等10秒讓乘客坐穩了才能開車，有新的乘客上來又要從新計算十秒，直到最後一個乘客上來爲止。拿個程序員常見的例子就是搜索框，每次輸入暫停了超過必定時間纔會去向服務器發送搜索請求。

function debounce(fn, time) {
    let Timer;
    return () => {
        Timer && clearTimeout(Timer)
        Timer = setTimeout(() => {
            fn.call(this, arguments)
        }, time)
    }
}
複製代碼

應用：

function debounce(fn, time) {
    let Timer;
    return () => {
        Timer && clearTimeout(Timer)
        Timer = setTimeout(() => {
            fn.apply(this, arguments)
        }, time)
    }
}

let input = document.querySelector('#input')

input.addEventListener('keyup', debounce(() => {
    console.log(input.value)
},500))
複製代碼

節流

顧名思義就是指一段時間內只會執行一次事件，也就是沒兩次事件執行的間隔大於等於所給定的時間。例如使用鼠標瘋狂點擊的時候，須要限制點擊事件的觸發頻率。

function throttle(fn, time) {
    let startTime = new Date()
    return () => {
        let now = new Date()
        if(now - startTime >= time){
            fn.apply(this, arguments)
            startTime = new Date()
        }
    }
}
複製代碼

應用：

function throttle(fn, time) {
    let startTime = new Date()
    return () => {
        let now = new Date()
        if(now - startTime >= time){
            fn.apply(this, arguments)
            startTime = new Date()
        }
    }
}

let button = document.querySelector('#button')

button.addEventListener('click', throttle(() => {
    console.log(new Date())
}, 1000))
複製代碼

參考