节流

节流: 在短时间内快速的触发一件事, 当一事件处理函数开始执行的时候, 在此期间, 不允许重复触发

const box = document.querySelector('input')

box.oninput = ((flag) => {
    return function (e) {
        if (!flag) return
        flag = false 
        setTimeout(() => {
        console.log(e.target.value)
        flag = true
        }, 300)
    }
})(true)

防抖

在短时间内快速的触发一件事, 每次都用新的事件替代上一次, 也就是说那么我们只会执行最后一次触发的事件

const box = document.querySelector('input')

box.oninput = (() => {
    let timerID = 0
    return function (e) {
        clearInterval(timerID)
        timerID = setTimeout (() => {
        console.log(e.target.value)
        }, 300)
    }
})()