Skip to content

防抖

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

概念

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 事件
  • 鼠标移动事件

节(截)流

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

概念

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);
    }
  };
}

节流应用场景

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

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

选择依据(区别)

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

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