2020-10-30 再谈防抖 debounce

一：应用场景：

用户因为频繁操作，导致监听事件频繁触发、发送请求。造成资源浪费、降低前端性能。防抖：即在用户操作或者暂停时，监听事件。例：用户在搜索框输入字段，监听change事件

二：代码示例

let input=document.getElementById('input1')
let timer = null
//未防抖，正常执行
input.addEventListener('keyup', function () {    
    console.log(input.value) 
})

//防抖
input.addEventListener('keyup', function () {
if (timer) {
    clearTimeout(timer)
}
timer = setTimeout (() =>{
    console.log(input.value)
    timer = null
},500)
})

no-debounce.png

no-debounce.png

三：代码封装

function debounce (fn,delay) {
    let timer = null    
    return function () {
        if (timer) {
            clearTimeout (timer)
        }
        timer = setTimeout ( () => {
           fn.apply (this,arguments)
           timer = null 
        },delay)
    }       
}
input.addEventListener('keyup',debounce(function (e,a) {
    console.log('encapsulation-debounce:',e.target.value)
},500))

encapsulation-debounce.png