js手写防抖、节流函数-基本实现

最新推荐文章于 2025-04-19 16:33:14 发布

sakura最好惹

最新推荐文章于 2025-04-19 16:33:14 发布

阅读量468

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_46343149/article/details/128803528

版权

本文介绍了前端开发中防抖(debounce)与节流(throttle)的技术应用，通过实例展示了如何减少不必要的网络请求，提高用户体验及系统性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

认识防抖debounce函数

我们都遇到过这样的场景，在某个搜索框中输入自己想要搜索的内容：

比如想要搜索一个MacBook：

当我输入m时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网络请求；

当继续输入ma时，再次发送网络请求；

那么macbook一共需要发送7次网络请求；

这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力;

但是我们需要这么多次的网络请求吗？

不需要，正确的做法应该是在合适的情况下再发送网络请求；

比如如果用户快速的输入一个macbook，那么只是发送一次网络请求；

比如如果用户是输入一个m想了一会儿，这个时候m确实应该发送一次网络请求；

也就是我们应该监听用户在某个时间，比如500ms内，没有再次触发时间时，再发送网络请求；

这就是防抖的操作：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；

    // 防抖
    function debounce(fn, delay) {
      // 1.用于记录上一次事件触发的timer
      let timer = null

      // 2.触发事件时执行的函数
      return function (...args) {
        // 2.1 如果有再次触发事件 取消上一次事件
        if (timer) clearTimeout(timer)

        // 2.2 延迟去执行对应的fn函数
        timer = setTimeout(() => {
          fn.apply(this, args)
          timer = null // 执行函数之后 将timer重新置为null
        }, delay)
      }
    }

认识节流throttle函数

很多人都玩过类似于飞机大战的游戏

在飞机大战的游戏中，我们按下空格会发射一个子弹：

很多飞机大战的游戏中有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；

比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；

但是事件是触发了10次的，响应的函数只触发了一次；

    // 节流
    function throttle(fn, interval) {
      let startTime = 0
      return function (...args) {
        // 1.获取当前时间
        const nowTime = new Date().getTime()

        // 2.计算需要等待的时间执行函数
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
          fn.apply(this, args)
          startTime = nowTime
        }
      }
    }

我们通过一个搜索框来验证防抖、节流函数的实现过程：

监听input的输入，通过打印模拟网络请求

<input type="text">

const inputEl = document.querySelector('input')

let count = 1
inputEl.addEventListener('input', apdebounce(function (event) {
  console.log(`发送网络请求${count++}次:`, this.value, event)
}, 300))