JS防止用户输入频繁调用函数、JS防抖debounce函数

像keyup,keydown等可以频繁调用的事件，需要一个延时器函数来解决此类问题，等待用户输入完成好几秒或几毫秒在执行，话不多说上代码。

const input = document.getElementById('input')

let timer = null

input.addEventListener('keyup', function () {
    if (timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        // 模拟触发change事件
        console.log(input.value)

        // 清空定时器
        timer = null
    }, 500);
})

// 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)
    }
}

// 演示
input.addEventListener('keyup', debounce(() => {
    console.log(input.value)
}), 600)

上面可以复用的函数是：

// 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)
    }
}