防抖
概念
1. 函数防抖,是指在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
防抖实现
js
function debounce(fn, delay = 200) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
防抖应用场景
- 滚动事件处理
- 窗口变化 resize 事件
- 输入框 Input 事件
- 鼠标移动事件
节(截)流
概念
1. 函数节流,是指规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
> 技能,首次立即触发,在在规定时间内频繁触发,不会执行,等待单位时间后,再次触发立即执行;
节流实现
js
function throttle(fn, delay = 200) {
let timer;
return function (...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
clearTimeout(timer);
timer = null;
}, delay);
}
};
}
节流应用场景
节流函数常用于控制函数的执行频率
- 用户做验证码验证时,使用节流函数,防止用户的频繁触发验证码的获取请求,减少带宽,当然做严格的验证码防御机制,紧靠前端是无法实现的,需要服务端配合。(防盗刷限制请求频率 过于频繁 限制请求返回 用户适当采取阶梯封禁 原则等)
- 游戏中的技能
选择依据(区别)
- 如果事件是一次性的(例如用户完成输入触发的动作),更合适使用防抖;如果是持续性的(例如滚动事件),更合适使用节流。
- 解决触发频率 频繁的问题 使用节流
这个问题理解的并不是很清晰