js 如何处理 防抖 和 节流

1.手写防抖函数

   *  核心：利用 setTimeout 定时器实现

   *  1.声明定时器变量

   *  2.每次鼠标移动（事件触发）的时候都要先判断是否有定时器，如果有先清除以前的定时器

   *  3.如果没有定时器，则开启定时器，存入到定时器的变量里面

   *  4.定时器里面写函数调用

  let num = 0
  const box = document.querySelector('.box')
  function mouseMove() {
    box.innerHTML = num++
  }
  function debounce(fn, t) {
    let timer
    return function () {  // 返回匿名函数
      if (timer) clearTimeout(timer)
      timer = setTimeout(function () {
        fn()  // 加小括号调用函数
      }, 500)
    }
  }
  box.addEventListener('mousemove', debounce(mouseMove, 500))
  //debounce： 函数防抖 概念 ：函数防抖（debounce），就是指触发事件后，
  //在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间

 * 2. 手写节流函数

   *   核心：节流的核心就是利用定时器来实现：

   *   1.声明一个定时器变量

   *   2.当鼠标每次滑动都先判断是否有定时器，如果有定时器则不开启新定时器

   *   3.如果没有定时器则开启定时器，记得保存在变量里面

   *   注意：

   *      1.定时器里面调用函数执行的函数

   *      2.定时器里面要把定时器清空

  let numtrue = 0;
  const boxtrue = document.querySelector('.box')
  function mouseMovetrue() {
    boxtrue.innerHTML = numtrue++
  }
  function throttle(fn, t) {
    let timertrue = null
    return function () { //匿名函数
      if (!timertrue) {
        timertrue = setTimeout(function () {
          fn() // 加小括号调用函数
          timertrue = null // 清除定时器
        }, t)
      } else {
        return
      }
    }
  }
  boxtrue.addEventListener('mousemove', throttle(mouseMovetrue, 500))

 

性能优化	说明	使用场景
节流	单位时间内，频繁触发事件，只执行第一次	高频事件：鼠标移动 mousemove、页面尺寸缩放 resize 、滚动条滚动scroll等等