函式的防抖和節流

conqorld發表於2019-04-15
函式

昨天坐公交，人剛上完，當機一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 debounce(fn, time) {
    let startTime = new Date()
    return () => {
        let now = new Date()
        if(now - startTime >= time){
            fn.apply(this, arguments)
            startTime = new Date()
        }
    }
}
複製程式碼

應用：

function debounce(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', debounce(() => {
    console.log(new Date())
}, 1000))
複製程式碼

參考

相關文章