JS 性能优化之防抖

很酷的站长

发布于 2022-12-05 16:07:09

1.3K0

发布于 2022-12-05 16:07:09

文章被收录于专栏：站长的编程笔记

源码下载站

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

事件