JS 性能优化之防抖

1. 防抖是什么

防抖: 在事件被触发 n 秒后执行回调，如果在这 n 秒内又被触发，则重新计时

防抖的应用场景: 输入框连续输入值后，等到最后一次输入完成才触发查询的动作

2. 输入框的防抖处理

<input type="text" id="ipt">

function input(e) {
    request(e.target.value)
}
function request(data) {
    console.log('请求参数: ', data);
}
// 防抖函数
function debounce(fun, delay = 200) {
    let timeout = null
    return function (...args) {
        if (timeout) {
            clearTimeout(timeout)
            timeout = null
        }
        timeout = setTimeout(() => {
            fun.apply(this, args)
        }, delay)
    }
}
input = debounce(input, 300)
document.getElementById('ipt').oninput = input