JS - 防抖与节流

防抖:

事件在开始执行时,如果快速触发了第二次,那么第二次会取代第一次,只会执行最后一次

<input test="test">

// 获取元素
const inp = document.querySelector('input')

inp.oninput = (function(timer) {
    return function() {
        clearTimeout(timer)
        timer = setTimeout(() => {
            console.log(this.value)
        },500)
    }
})(0)

节流:

事件第一次开始执行时,在结束之前或者是在指定时间前,无法触发下一次,除非等到第一次执行结束后或者是在指定时间到达后,才可以进行下一次

<input test="test">

// 获取元素
const inp = document.querySelector('input')

// 绑定事件
inp.oninput = (function(flag) {
    return function() {
       if(flag === false) return 
       flag = false
       setTimeout(() => {
           flag = true
           console.log(this.value)
       },500)
    }
})(true)