防抖

上次更新 2024年9月13日星期五 3:23:41 字数 0 字 时长 0 分钟

概念

1. 函数防抖，是指在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

防抖实现

function debounce(fn, delay = 200) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

防抖应用场景

• 滚动事件处理
• 窗口变化 resize 事件
• 输入框 Input 事件
• 鼠标移动事件

节（截）流

上次更新 2024年9月13日星期五 3:23:41 字数 0 字 时长 0 分钟

概念

1. 函数节流，是指规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
> 技能，首次立即触发，在在规定时间内频繁触发，不会执行，等待单位时间后，再次触发立即执行；

节流实现

function throttle(fn, delay = 200) {
  let timer;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        clearTimeout(timer);
        timer = null;
      }, delay);
    }
  };
}

节流应用场景

节流函数常用于控制函数的执行频率

• 用户做验证码验证时，使用节流函数，防止用户的频繁触发验证码的获取请求，减少带宽，当然做严格的验证码防御机制，紧靠前端是无法实现的，需要服务端配合。（防盗刷限制请求频率 过于频繁 限制请求返回 用户适当采取阶梯封禁 原则等）
• 游戏中的技能

选择依据(区别)

• 如果事件是一次性的（例如用户完成输入触发的动作），更合适使用防抖；如果是持续性的（例如滚动事件），更合适使用节流。
• 解决触发频率 频繁的问题 使用节流

这个问题理解的并不是很清晰