• 节流(Throttle)和防抖(Debounce)

    为啥要使用防抖和节流

    在项目开发中，我们经常用到的滚动事件或者用户输入事件，都是一些高频事件，如果对这类事件触发的频率没有节制，就会加重浏览器和服务器的负担。节流和防抖目的就是减少事件触发的次数。

    1.什么是防抖

    防抖（debounce）指的是： 频繁触发 某个操作时， 只执行最后一次 。
    好处：这样可以有效减少请求的次数，节省网络资源。

    实现代码如下：

    1.  
    2.   <body>
    3.     <label> 姓名：</label><input type="text" placeholder="请输入用户名">
    4.   </body>
    5.   <script>
    6.     // 防抖：短时间内触发多次，只会执行最后一次
    7.   let input=document.querySelector('input')
    8.   const info=function (){
    9.     console.log(input.value);
    10.   }
    11.   
    12.   input.addEventListener('input',debounce(info,1000))
    13.  
    14.   // 封装防抖函数
    15.   function debounce(fn,time){
    16.     let timer=null
    17.     return()=>{
    18.       // 清除上一次的计时器
    19.       clearTimeout(timer)
    20.       timer=setTimeout(() => {
    21.       fn()
    22.       }, time);
    23.     }
    24.   }
    25.   </script>

    主要应用场景有：

    a、scroll事件滚动触发，
    b、搜索框只有在输入完后，才执行查询的请求
    c、表单验证
    d、按钮提交事件
    e、浏览器窗口缩放，resize事件

     2.什么是节流

    节流（throttle）指的是： 单位时间内 ， 频繁 触发同一个操作， 只会触发 1 次 。

     实现代码如下：

    1. <body>
    2.   <div></div>
    3. </body>
    4. <script>
    5. let div=document.querySelector('div')
    6.  
    7. const info=function(){
    8.   console.log('点击了一次');
    9. }
    10.  
    11. div.addEventListener('click',throttle(info,5000))
    12.  
    13. //封装节流的函数
    14. function throttle(fn,time){
    15.   let flag=false
    16.   return()=>{
    17.     if(flag===true){
    18.     return
    19.   }
    20.   flag=true
    21.   setTimeout(function(){
    22.     fn()
    23.    flag=false
    24.   },time)
    25.   }
    26. }
    27. </script>

    应用场景：

    a、DOM元素的拖拽功能实现
    b、射击游戏中，单位时间内只能发射一颗子弹。
    c、计算鼠标移动的距离
    d、监听scroll事件

  • 相关阅读:
    018-Java类与对象案例分析
    K8s 部署 CNI 网络组件+k8s 多master集群部署+负载均衡
    基于matlab的精馏塔作业模拟仿真
    学习Ant Design Charts的使用——修改案例
    反射获取类、方法、属性
    ZYNQ7010的PS编程笔记
    CUR矩阵分解
    微服务架构最佳实践：故障恢复和容错策略
    flutter中使用缓存
    java毕业设计网站SSM幼儿园信息管理系统
  • 原文地址：https://blog.csdn.net/m0_67841039/article/details/125610249