本站消息
函数 - 防抖（debounce）
发布于2021-04-09 07:20 阅读(280) 评论(0) 点赞(11) 收藏(0)
多种不同的解释（定义）
- 短时间内多次触发，最终在停止触发后的某个指定
时间执行一次函数 —只执行一次。- 防抖: 指触发事件 n 秒后才执行函数，
如果在 n 秒内又触发事件，
则会重新计算函数执行时间。- 防抖是 n 秒内重复的触发会导致重新计时，
直到 n 秒内没有重复触发函数才会执行。
示例 - 1 - 监听滚动条
- JavaScript 部分
let timer;
window.onscroll = function() {
// 如果当前 timer 不是 undefined ，
// 说明前面有一个等待的请求还未发送，
// 就停止前面的等待
if (timer !== undefined) {
clearTimeout(timer);
};
// 再重现下一轮等待
timer = setTimeout(function() {
// 当 500ms 内，未发生滚动时，
// 才发送正式的 ajax 请求
console.log('发送 ajax 请求');
}, 500);
};
示例 - 2 - 按钮点击
- html 部分
<button id="btn">防抖</button>
- JavaScript 部分
// 500 毫秒内多次触发只会执行一次
function clearT() {
let timer;
return function() {
// 如果 500 毫秒内又一次触发，
// 则会重新计算时间
// if (timer) clearTimeout(timer):
// 相当于清除定时器并且 return
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
console.log('发送请求')
}, 500);
};
};
// document.querySelector('#btn'): 通过 id 获取元素
// addEventListener('click', clearT()): 给元素添加监听事件 clearT()
document.querySelector('#btn').addEventListener('click', clearT());
原文链接:https://blog.csdn.net/weixin_51157081/article/details/115278898
所属网站分类: 技术文章 > 博客
作者：前端大师
链接：http://www.qianduanheidong.com/blog/article/58528/d18109457f816f3a6c6a/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
11
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)