实现节流去抖函数
原创
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview
完整高频题库阅读地址：https://febook.hzfe.org/
节流
1. 基本概念
throttle(func, wait)
每 wait 毫秒内最多只调用一次 func。
2. 应用场景
- 搜索框输入时的实时联想。
- 监听 scroll 事件计算位置信息。
3. 流程图
4. 编写代码
function throttle(func, wait) {
let lastTime = 0;
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
timer = null;
}
let self = this;
let args = arguments;
let nowTime = +new Date();
const remainWaitTime = wait - (nowTime - lastTime);
if (remainWaitTime <= 0) {
lastTime = nowTime;
func.apply(self, args);
} else {
timer = setTimeout(function () {
lastTime = +new Date();
func.apply(self, args);
timer = null;
}, remainWaitTime);
}
};
}去抖
1. 基本概念
debounce(func, wait)
自最近一次触发后延迟 wait 毫秒调用 func。
2. 应用场景
- 注册时输入完用户名后检测是否被占用。
- 监听 resize 事件计算尺寸信息。
3. 流程图
4. 编写代码
function debounce(func, wait) {
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
timer = null;
}
let self = this;
let args = arguments;
timer = setTimeout(function () {
func.apply(self, args);
timer = null;
}, wait);
};
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录