关于防抖的详细解读和使用（保姆级一步一步带你解读代码）

渊兮兮

于 2024-08-08 15:58:10 发布

阅读量686

点赞数 14

文章标签： html5 javascript

本文链接：https://blog.csdn.net/m0_61644311/article/details/140953653

版权

前端工具代码详解（有防抖、节流等等常用工具解读）

第一章防抖的详细解读（一行一行分析代码带你深入了解防抖）

文章目录

前端工具代码详解（有防抖、节流等等常用工具解读）
一、什么是防抖？
二、创建页面
总结

一、什么是防抖？

所谓防抖，用通俗易懂的话来讲就是，当你在进行一个操作时，比如点击一个按钮，你反复的去点击它，但是它只会在你停止点击后，在触发这个点击事件。这就是为了防止你多次反复的触发这个事件导致卡死或者发太多请求让服务器卡死的情况。接下来我们就从代码的角度去实现这个功能吧！

二、创建页面

1.创建一个HTML页面

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖(debounce)</title>
    <style>
      #container {
        width: 100%;
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: larger;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
   	</script>
  </body>
</html>

后续实现防抖的功能就是在这个页面中去展示

2.创建一个函数，实现在container这个盒子移动鼠标递增数据

代码如下（示例）：

 let count = 1
 let container = document.getElementById('container')
 function moveMouse() {
   container.innerHTML = count++
 }
 container.onmousemove = moveMouse

有些小伙伴可能会疑惑，为什么是 container.onmousemove = moveMouse 是这样子赋值而不是 container.onmousemove = moveMouse() 这样子，因为如果是moveMouse()赋值这个，就相当于把一个执行后的函数结果给赋值给container.onmousemove 它了，我们需要的是{container.innerHTML = count++} 把这一块赋值给onmousemove 这个属性名，这样子每一次鼠标移动，其实就是相当于moveMouse() 这样子调用了一次

效果如下（示例）：
在这里插入图片描述

3.创建一个防抖函数，让他只有在停止后才触发加一

代码如下（附上注释详细解析）：

	  // 传入两个参数，一个是我们需要防抖的功能函数，一个是停下多少秒后会执行(1000 = 秒)
      function debounce(func, wait) {
        // 创建一个timer来存储setTimeout这个定时器
        let timer = null
        // 返回一个函数出去，为什么要返回一个函数呢，因为这个函数是要赋值给别人，让别人调用的，就像上面的 moveMouse 一样，把这个赋值给需要触发的人
        return function () {
           // 清除定时器
          clearTimeout(timer)
          // 再次创建一个定时器，重新赋值给timer
          timer = setTimeout(func, wait)
        }
      }
      // 调用防抖函数
       container.onmousemove = debounce(moveMouse, 1000)

到这里可能还是有小伙伴比较迷糊，为什么要返回一个函数，它的执行顺序是什么，接下来我就会一步一步解析这个代码逻辑

问题一：为什么要返回一个函数

因为如果不返回一个函数，这是为了将 timer 这个唯一化。
其实就是闭包的概念，这个比较复杂，有兴趣的可以去了解一下。
我这边简单讲一下，主要是为了让我们每一次触发这个返回的函数的时候，这个清除timer是清除同一个timer，就是可以把timer之前所包含的值给清除了。
如果不返回一个函数直接是一个debounce函数的化，每一次调用这个debounce都会新建一个timer，你使用了多少debounce就会创建多少个timer，这个时候你去清除这个timer是不能清除掉这个timer的值的，因为他们直接互不影响。

总而言之，就是返回函数的，不管调用多少都是timer，而直接返回值的，会生成timer1，timer2，timer3等等没有办法实现清除上一个定时器，只会不断创建新的定时器

拆分代码解析（重点，帮助理解）

// 假设创建一个防抖函数
 function debounce(func, wait) {
  let timer = null
  return function () {
    clearTimeout(timer)
    timer = setTimeout(func, wait)
  }
}
function test(){
	console.log(1)
}
// 在执行这两次函数的时候里面分别发送了什么呢
// 1.创建一个timer = null，在赋值给p的时候就创建了一个timer
// 这个timer会一直存在与p中，后续p()中清除的timer和赋值的timer都是这个
let p = debounce(test,1000)
// 执行防抖函数两次第一次
p()
/*
1.清除了timer clearTimeout(timer)
2. 给timer赋值了一个定时器 1 
*/
// 执行防抖函数两次第二次(1s内)
/*
1.清除了timer = 定时器1 clearTimeout(timer)，清除后不再执行定时器1
2. 给timer赋值了一个定时器 2
*/
p()
// 一秒后 执行函数 test,打印 1

最终整体实例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖(debounce)</title>
    <style>
      #container {
        width: 100%;
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: larger;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript">
      let count = 1
      let container = document.getElementById('container')
      function moveMouse() {
        container.innerHTML = count++
      }
      function debounce(func, wait) {
        let timer = null
        return function () {
          clearTimeout(timer)
          timer = setTimeout(func, wait)
        }
      }
       container.onmousemove = debounce(moveMouse, 1000)
     </script>
  </body>
</html>