事件的防抖和节流
防抖和节流函数是我们经常用到的函数，在实际的开发过程中，如 scroll、resize、click、键盘等事件很容易被多次触发，频繁的触发回调会导致页面卡顿和抖动，为了避免这种情况，需要使用节流和防抖的方法来减少无用的操作和网络请求，也是面试中经常遇到的问题，需要牢牢掌握。
防抖和节流的本质
都是闭包的形式存在的.
他们通过对事件的回调函数进行包裹、以保存自由变量的形式来缓存时间信息，最后使用 setTimeout 来控制事件的触发频率。
节流：第一个人说了算
节流（Throttle）的中心思想在于：在某段时间内不过你触发了多少次，我都只认第一次，并且在计时结束时给出响应。
/**
* 函数节流
* 作用：一段时间内的多次操作，只按照第一次触发开始计算，并在计时结束时给予响应。
* 场景：如输入搜索功能
* @param fn 需要进行节流操作的事件函数
* @param interval 间隔时间
* @returns {Function}
*/
function throttle(fn, interval = 500) {
let last = 0;
return function (...args) {
let now = +new Date();
if (now - last > interval) {
last = now;
fn.call(this, args);
}
};
}
/**
* 步骤
* 接受一个函数，和一个触发间隔时间，时间默认是 500ms
* 默认赋值为0
* 将多个参数解构为一个参数数组
* 记录本次触发回调的时间
* 判断上次触发的时间和本次之间的间隔是否大于我们设定的阈值
* 将本次触发的时间赋值给last，用于下次判断
* 使用call调用传入的回调函数，并传入参数
*
*/使用：在 onScorll 中使用节流
// 使用 throttle 来包装 scorll 的回调函数，设置间隔时间为1s
const better_scorll = throttle(() => {
console.log("触发了滚动事件");
}, 1000);
document.addEventListenner("scorll", better_scorll);
// 1s内，无论触发多少次，都只从第一次触发之后的1s后给出响应。防抖：最后一个人说了算
防抖的中心思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次
/**
* 函数防抖
* 作用：一段时间内的多次操作，只执行最后一次。
* 场景：如点击登录/注册/支付等按钮时
* @param fn 需要进行防抖操作的事件函数
* @param delay 延迟时间
* @returns {Function}
*/
function debounce(fn, delay = 500) {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.call(this, args);
}, delay);
};
}
/**
* 接受一个函数，和一个触发间隔时间，时间默认是 500ms
* 定时器 id 默认赋值为null
* 将多个参数解构为一个参数数组
* 判断timer是否存在，如存在就取消定时器
* 然后创建一个新的定时器，并将id赋值给timer
* 然后如果再次点击重复上面的操作，一直到delay时间内没点时，定时器执行
* 执行时：使用call调用传入的回调函数，并传入参数
*
*/使用：在 onScorll 中使用防抖
// 用debounce来包装scroll的回调
const better_scroll = debounce(() => console.log("触发了滚动事件"), 1000);
document.addEventListener("scroll", better_scroll);用 Throttle 来优化 Debounce
debounce 的问题是它太有耐心了，试想，如果用户的操作十分频繁————他每次都不等 debounce 设置的 delay 的时间结束就进行下一次操作，于是每次 debounce 都会为用户重新生成定时器，回调函数被延迟了一次又一次，用户迟迟得不到响应，用户也会对这个页面产生“页面卡死”了的观感。
为了避免弄巧成拙，我们需要借力 Throttle 的思想，打造一个“有底线”的 debounce ，等你可以，但我有我的原则：delay 时间内，我可以为你重新生成定时器，但是只要 delay 时间一到，我就必须给用户一个响应。
这种 Throttle 和 debounce 合体的思想，已经被很多成熟的前端库应用到他们的加强版 throttle 函数中了。
/**
* 加强版节流函数
* 作用：delay时间内的多次操作将会重新生成定时器，但只要delay时间一到就执行一次。
* 场景：如点击登录/注册/支付等按钮时
* @param fn 需要进行防抖操作的事件函数
* @param delay 延迟时间
* @returns {Function}
*/
function throttle(fn, delay = 500) {
let last = 0;
let timer = null;
return function (...args) {
let now = +new Date();
if (now - last < delay) {
// 如果间隔时间小于我们设定的阈值，则重新生成一个定时器
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
last = now;
fn.call(this, args);
}, delay);
} else {
// 如果 间隔时间大于设定的阈值，就执行一次。
last = now;
fn.call(this, args);
}
};
}
/**
* 接受一个函数和延迟时间，延迟时间默认是500ms
* 定义一个开始执行的时间戳和定时器id，赋予默认值
* 返回一个函数，并将参数转为数组。
* 函数内，拿到当前的时间戳
* 判断，是否小于间隔时间：
* 小于：则清楚定时器，然后重新生成定时器。定时器内直接赋值,然后call函数，
* 大于：直接赋值,然后call函数，
*/使用：在 onScorll 中使用加强版 throttle
// 用throttle来包装scroll的回调
const better_scroll = throttle(() => console.log("触发了滚动事件"), 1000);
document.addEventListener("scroll", better_scroll);本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
