防抖: 在事件被触发 n 秒后执行回调,如果在这 n 秒内又被触发,则重新计时
防抖的应用场景: 输入框连续输入值后,等到最后一次输入完成才触发查询的动作
<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