首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >JS 性能优化之防抖

JS 性能优化之防抖

作者头像
很酷的站长
发布于 2022-12-05 16:07:09
发布于 2022-12-05 16:07:09
1.6K0
举报

源码下载站

1. 防抖是什么

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

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

2. 输入框的防抖处理
代码语言:javascript
复制
<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 删除
目录
  • 1. 防抖是什么
  • 2. 输入框的防抖处理
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档