JS中的防抖与节流

防抖与节流

防抖概念： 在一定的时间间隔N秒后才执行该事件， 若在N秒内被重复触发，则重新计时

• 应用场景
  • 输入框连续输入值后，直等到最后一次输入完成才触发的查询动作
  • 点赞， 表单提交等动作， 防止重复提交

function deBounce(fn, delay = 200) {
   let timeout = null
   return (...args) => {
     // 是否有定时器
     if (timeout) {
       clearTimeout(timeout)
       timeout = null
     } else {
       // 对第一次输入立即执行
       fn.apply(this, args)
     }
     timeout = setTimeout(() => {
       fn.apply(this, args)
     }, delay)
   }
 }

节流概念: N秒内只运行一次，若在N秒内重复触发，只有第一次生效

• 应用场景
  • 滚动加载： 监听页面滚动到底部的时候触发
  • 拖拽场景： 固定时间只执行一次，防止高频率的位置变动

节流函数封装

// 实现思路
//  1.借助setTimeout定时器，控制后续的事件是否执行
//  2.获取每次事件执行的事件与上一次执行的时间差
//  3.判断时间差是否已经超过设定的事件间隔
//  4.如果时间间隔已经超过， 则会立即执行函数
//  5. 如果没有超过， 则会取消后续的定时器任务
//  6. 最后一次事件的触发，会执行完成
function throttle(fn, time) {
      // 上一次执行的时间
      let pre = 0
      // 定时器
      let timeout = null
      return function (...args) {
        const now = Date.now()
        // 如果时间超出了时间间隔
        if (now - pre > time) {
          pre = now
          fn.apply(this, args)
        } else {
          // 如果在时间间隔内， 则后续的事件会直接清楚
          if (timeout) {
            clearTimeout(timeout)
            timeout = null
          }
          // 最后一次的事件会触发
          timeout = setTimeout(() => {
            pre = Date.now()
            fn.apply(this, args)
          }, time)
        }
      }
    }

总结

防抖：在一定的时间间隔N秒后才执行该事件， 若在N秒内被重复触发，则重新计时
节流：N秒内只运行一次，若在N秒内重复触发，只有第一次生效