JavaScript 手写防抖节流以及应用演示，点赞加关注持续更新~

十七同志

已于 2023-12-06 18:35:20 修改

阅读量1.1k

点赞数 28

分类专栏： Javascript 知识点专栏文章标签： javascript 开发语言前端

于 2023-12-05 20:30:03 首次发布

本文链接：https://blog.csdn.net/weixin_54049256/article/details/134815519

版权

Javascript 知识点专栏专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

防抖节流
防抖（`debounce`）
- 防抖的主要应用场景：
- 实现思路:
节流（`throttle`）
- 使用场景：
- 实现思路：
第三方库Lodash

防抖的应用演示，持续的事件触发停止时，执行最后一次

节流的应用演示，持续的事件触发，每隔一段相同的事件触发一次

防抖和节流的演示代码已上传至Incode，可以直接从文章顶部去运行

防抖节流

防抖（debounce）和节流（throttle）都是性能优化的手段，减少资源消耗，提高代码性能
防抖其实就是当事件持续触发的时候，只执行事件停止触发后的最后一次事件
节流与防抖类似，节流是当事件持续触发的时候，每隔相同的一段事间触发一次

防抖（`debounce`）

在同一时间内，连续触发事件,只处理最后一次，这样可以减少计算机算力的消耗，优化性能

防抖的主要应用场景：

输入框实时搜索：当用户在输入框中输入时，你可能希望只有在用户停止输入一段时间后再执行搜索，而不是每次用户键入字符就执行搜索，这样可以减少不必要的计算和网络请求。
窗口调整事件：当用户调整窗口大小时，你可能希望只有在窗口大小停止变化后的一段时间内重新计算布局，而不是每次窗口大小发生变化就重新计算，这样可以提高性能。

实现思路:

当事件发生，不立即执行事件回调。用定时器定个时间，在事件停止触发后一段时间后才去触发（延迟触发事件）
再次触发事件，先取消上次的定时器，再重新开启一个定时器（重新刷新定时器的时间）

创建一个防抖函数debounce

 // 创建一个防抖函数
    function debounce(fn, time) {
      let setId // 定义一个计时器变量，接收定时器，可以用来清楚定时器
      return function () {
        clearTimeout(setId) // 如果在规定时间内再次输入，则清除上一次计时器
        setId = setTimeout(function () {
          fn()  // 等待规定时间后执行函数
        }, time)
      }
    }

防抖函数创建完成，接下来就是来个简单的演示,完整代码如下

 <style>
    * {
      list-style: none;
    }

    .render {
      color: red;
    }
  </style>
</head>

<body>
  <input type="text"> <!-- 创建一个输入框 -->
  <ul class="render"></ul> <!-- 创建一个无序列表 -->
  <script>
    // 创建一个防抖函数
    function debounce(fn, time) {
      let setId // 定义一个计时器变量
      return function () {
        clearTimeout(setId) // 如果在规定时间内再次输入，则清除上一次计时器
        setId = setTimeout(function () {
          fn()  // 等待规定时间后执行函数
        }, time)
      }
    }
    const input = document.querySelector('input') // 获取输入框元素
    const render = document.querySelector('.render') // 获取无序列表元素
    input.addEventListener(
      'input', // 监听输入事件
      debounce( // 传入防抖函数
        () => {
          render.innerHTML += '<li>我是防抖</li>' // 在无序列表中增加一个列表项
        }, 1000) // 设置防抖时间为1秒
    ) 
  </script>

节流（`throttle`）

所谓节流，就是当事件持续触发的时候，每隔相同的一段事间触发一次，减少事件触发的频率

使用场景：

小米轮播图点击效果、鼠标移动、页面尺寸缩放resize、滚动条滚动等等
假如一张轮播图完成切换需要300ms，不加节流效果，快速点击，就会快速的切换。加上节流效果，不管快速点击多少次， 300ms时间内，只能切换一张图片。

实现思路：

先创建一个“门”，“门”初始值为打开
当事件触发时，进入“门”内，并关闭“门”，后续的事件触发就无法进入。
并且在“门”内设置setTimeout，只有当setTimeout结束时才重新开启“门”，让下一个事件进来
这样就能实现，事件持续触发，每隔一段相同的时间才触发一次，也就是节流

创建一个节流函数，代码并不多，重要的是思路

 function ttrottle(fn,time){  //定义一个节流函数，接收两个参数：要执行的函数和等待时间
      let flag = false   //定义一个标志，用于判断是否在等待时间内已经执行过该函数
      return ()=>{   // 返回一个匿名函数
      if(flag) return   //如果已经执行过该函数，则直接返回
        flag=true  // 否则将标志设置为true，表示已经执行过该函数
        setTimeout(   // 等待一段时间后执行函数
          ()=>{
            fn(),   // 执行传入的函数
          flag=false   // 将标志设置为false，表示函数执行完毕，可以再次执行
          },time)   // 等待的时间
      }
    }

将创建节流函数进行简单的引用和演示，完整代码如下

<style> 
    *{ 
      list-style: none;
    }
    .render{ 
      color: red;
    }
</style>
</head> 
<body> 
  <input type="text"> 
  <ul class="render"></ul>
  <script> 
    function ttrottle(fn,time){  //定义一个节流函数，接收两个参数：要执行的函数和等待时间
      let flag = false   //定义一个标志，用于判断是否在等待时间内已经执行过该函数
      return ()=>{   // 返回一个匿名函数
      if(flag) return   //如果已经执行过该函数，则直接返回
        flag=true  // 否则将标志设置为true，表示已经执行过该函数
        setTimeout(   // 等待一段时间后执行函数
          ()=>{
            fn(),   // 执行传入的函数
          flag=false   // 将标志设置为false，表示函数执行完毕，可以再次执行
          },time)   // 等待的时间
      }
    }
   
   const input= document.querySelector('input')    // 获取文本输入框元素
   const render = document.querySelector('.render')     // 获取类名为render的元素
   input.addEventListener(   // 为文本输入框添加input事件监听器
      'input',  // 事件类型
      ttrottle(    // 传入节流函数，使输入事件不会频繁执行，时间间隔为1s
     ()=>{
      render.innerHTML+='<li>我是节流</li>' // 将一条包含“我是节流”文本的列表项添加到类名为render的无序列表中
     },1000))   // 等待时间为1s
  </script>

第三方库Lodash

除了自己手写，还可以使用第三方库区实现防抖节流，具体使用可以参考官网使用文档，网址如下：Lodash官网

十七同志

关注

28
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
2
评论
JavaScript 手写防抖节流以及应用演示，点赞加关注持续更新~

防抖的应用演示，持续的事件触发停止时，执行最后一次节流的应用演示，持续的事件触发，每隔一段相同的事件触发一次防抖和节流的演示代码已上传至Incode，可以直接从文章顶部去运行。
复制链接

扫一扫