js 如何处理防抖和节流_js防抖的时候接口已经发出去了怎么办-优快云博客

本文介绍了如何手写JavaScript的防抖(debounce)和节流(throttle)函数，用于优化频繁触发的事件处理，如鼠标移动。防抖函数确保在设定的时间内只执行一次，而节流函数则保证单位时间内固定频率地执行。这两种技术常用于提升页面性能，例如在处理mousemove、resize和scroll等高频事件时。

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等等