防抖和节流
1. 防抖，回城-执行完成区间计时的那一次触发事件时开始计时，计时结束后执行事件处理。当计时未结束再次触发事件，则清除计时器并重新计时。
思路：利用闭包，保存回调函数的计时器。判断计时器是否存在，是-清除原计时器。在计时器内调用事件处理函数。
注意：这里要搞清楚返回的匿名函数才是绑定的点击事件，而非 debounce 函数。匿名函数可以访问父函数 debounce 声明的 timer，每次调用匿名函数时，timer 的数据得到保留。
<button>防抖-计时器</button>
<button clss="notTimer">防抖-非计时器</button>
// 使用计时器
let btn = document.querySelector('button');
btn.addEventListener('click', debounce(handler));
// 事件处理函数
function handler(e) {
console.log(e); //未传入参数时为undefine | 传参后：PointerEvent
console.log(this); //未修改时为window | 修改this后：<button>防抖-计时器</button>
}
// 防抖函数
function debounce(fn) {
let timer;
// 新的事件会刷新旧的事件，直到最后一件事等待1s后执行
return function (e) { // 返回作为回调事件
let _this = this; // 注意：计时器的this只能指向window，用箭头函数可继承父业（es6）
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
// 传入函数调用，提高可复用性
fn.call(_this, e); //！修改this，得去记，得去用啊宝宝:call/bind/apply
}, 1000)
}
}也可以用节流的计时方式。
// 不使用计时器
let btn1 = document.querySelector('.notTimer');
btn1.addEventListener('click', (function () {
let currTime = Date.now();
return function (e) {
let nowTime = Date.now();
if (nowTime - currTime < 3000) { // 时效内点击，刷新计时器
currTime = nowTime;
return;
}
// 调用处理函数
console.log(e)
console.log(this)
currTime = nowTime; // 处理完毕，刷新计时器
}
})())<br>
2. 节流，cd-区间内只执行第一次，禁止执行第二次
触发事件后立即执行事件处理，并开始计时，计时结束前，触发事情不执行事件处理。（合理来说应该是直到第一个执行完毕，可以设置标记，执行完修改标记，作为锁）
思路：记录第一次执行调用的时间戳，超时才能执行下一次调用，并重置起始时间。
window.addEventListener('scroll', throttle(handlerScroll, 1000));
// 事件处理函数
function handlerScroll(e) {
console.log(e);
console.log(this);
}
// 节流函数
function throttle(fn, delay) {
let prevTime = Date.now();
return function (e) {
let nowTime = Date.now();
if (nowTime - prevTime > delay) { // 区间计时结束，执行处理，并刷新起始时间
fn.apply(this, e);
prevTime = Date.now();
}
}
}<br>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 感谢，下载保存了 谢谢分享，试用一下 过来提前占个楼 谢谢楼主提供！ 很好很强大我过来先占个楼 待编辑 鼓励转贴优秀软件安全工具和文档！ 这个好，看起来很实用 分享、互助 让互联网精神温暖你我 感谢分享，下载保存了，貌似很强大 谢谢分享，试用一下 谢谢分享，试用一下 新版吗？好像是停更了吧。 用心讨论，共获提升！ 感谢发布原创作品，程序园因你更精彩 感谢分享，下载保存了，貌似很强大 谢谢分享，试用一下 这个有用。 谢谢楼主提供！ 热心回复！
页:
[1]
2