防抖 debounce

  • 监听一个输入框,文字变化后触发 change 事件
  • 直接用 keyup 事件,则会频发触发 change 事件
  • 防抖:用户输入结束活暂停时,才会触发 change 事件

有这样一个输入框

<input type="text" id="input">
<script>const input = document.getElementById('input')</script>

模拟 change 事件,未防抖频繁触发 keyup 事件

// 未防抖,频繁触发 keyup 事件  
input.addEventListener('keyup', function () {  
    console.log(this.value)  
})

利用 setTimeout 增加防抖措施

let timer = null  
//  利用 setTimeout 增加防抖措施  
input.addEventListener('keyup', function () {  
    if (timer) {  
        clearTimeout(timer)  
    }  
  
    timer = setTimeout(() => {  
        // 模拟触发 change 事件  
        console.log(this.value)  
  
        // 清空定时器  
        timer = null  
    }, 500)  
})

进一步优化,封装成函数

function debounce(fn, delay = 500) {  
    // timer 是闭包中  
    let timer = null  
  
    return function () {  
        if (timer) {  
            clearTimeout(timer)  
        }  
        timer = setTimeout(() => {  
            // 也其实可以用 fn()  
            fn.apply(this, arguments)  
            timer = null  
        }, delay)  
    }  
}  
  
input.addEventListener('keyup', debounce(() => {  
    console.log(input.value)  
}), 600)

标签: none

添加新评论