节流(Throttle)和防抖(Debounce)

为啥要使用防抖和节流

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

1.什么是防抖

防抖（debounce）指的是：频繁触发某个操作时，只执行最后一次。

好处：这样可以有效减少请求的次数，节省网络资源。

实现代码如下：


 
  <body>
    <label> 姓名：</label><input type="text" placeholder="请输入用户名">
  </body>
  <script>
    // 防抖：短时间内触发多次，只会执行最后一次
  let input=document.querySelector('input')
  const info=function (){
    console.log(input.value);
  }
  
  input.addEventListener('input',debounce(info,1000))
 
  // 封装防抖函数
  function debounce(fn,time){
    let timer=null
    return()=>{
      // 清除上一次的计时器
      clearTimeout(timer)
      timer=setTimeout(() => {
      fn()
      }, time);
    }
  }
  </script>

主要应用场景有：

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

2.什么是节流

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

实现代码如下：


<body>
  <div></div>
</body>
<script>
let div=document.querySelector('div')
 
const info=function(){
  console.log('点击了一次');
}
 
div.addEventListener('click',throttle(info,5000))
 
//封装节流的函数
function throttle(fn,time){
  let flag=false
  return()=>{
    if(flag===true){
    return
  }
  flag=true
  setTimeout(function(){
    fn()
   flag=false
  },time)
  }
}
</script>

应用场景：

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

相关阅读:
【无标题】
前端的导入导出：「CommonJS」「ES Module」模块化规范
基于 ACK Fluid 的混合云优化数据访问（五）：自动化跨区域中心数据分发
95.qt qml-诺谦通用可扩展多功能QML界面
浅谈ChatGPT
黑马头条（day01）
【TrueType】Digitizing Letterform Designs（数字化字体设计思想）
C#通过Entity Framework实体对数据表增删改查
Tomcat部署项目出现404
【ARM Trace32(劳特巴赫) 使用介绍 5-- Trace32 通过 JTAG 命令获取数据寄存器 IDCODE的值】

原文地址：https://blog.csdn.net/m0_67841039/article/details/125610249

节流(Throttle)和防抖(Debounce)

为啥要使用防抖和节流

1.什么是防抖

实现代码如下：

主要应用场景有：

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

2.什么是节流

实现代码如下：

应用场景：

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