手写防抖debounce

防抖 debounce (一段时间不触发事件才执行一次handle函数)

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的指向