const input1 = document.getElementById('input1')
let timer = null
input1.addEventListener('keyup',function () {
    if (timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() =>{
        // 模擬觸發 change 事件
        console.log(input1.value)
        // 清空定時器
        timer = null
    },500)
})
 

簡單的input防抖邏輯

情況一：

當輸入一個數字時，keyup觸發，設定一個定時器賦值給timer，500ms後列印input1.value的值

情況二：

當連續快速輸入幾個數字時，第一個數字輸入後，keyup觸發，設定一個定時器賦值給timer，還不到500ms時第二個數字又輸入了，此時timer有內容，清空前面的定時器，設定一個新的定時器賦值給timer，直至最後一個數字輸入完畢，500ms後列印input1.value的結果

封裝debounce防抖函式

function debounce(fn,delay = 500) {
    // timer 是閉包中的
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this,arguments)
            timer = null
        },delay)
    }
}

input1.addEventListener('keyup',debounce(function () {
    console.log(input1.value)
},600))
 

封裝思路

返回一個函式，利用閉包將timer引數放在返回函式的作用域中，封裝的函式傳遞兩個引數，分別是函式和計時器延遲的時間，在返回的函式中與上面的執行方式一樣，只是用apply改變this的指向