前言

为什么需要防抖与节流

 防抖和节流都是为了解决短时间内大量触发某函数或者事件而导致的性能问题，比如在

1.用户体验上，触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死，卡顿的现象

2.服务器上：加重服务器压力

防抖是什么

防抖是当事件或函数被触发后，延迟n秒后在执行回调，如果在这n秒内事件或函数又被触发，则重新计时，直到n秒内没有触发事件或函数，则执行回调函数

当我们不设计节流防抖时，用户每次的触发事件会是：

而当我们设计了节流防抖时，用户每次的触发事件会会是：

案例：翻译搜索器

当我们缺少，防抖节流功能，我们在进行翻译时每次输入可以看出当我每次输入一个字母的时候都发起了请求，这是不符合项目要求和这非常消耗服务器的性能对后台的API接口访问量是巨大的压力，而且中途返回的数据也并不是用户所需要的，我们应该在用户在输入内容后的一段时间内如果用户不再输入内容再发起请求，用户如果在这一段时间内再次输入，则继续等待用户在一段时间内不再输入内容后再发起请求。

xml

复制代码
  <script>
   let arr=['apple','door','name','China','information','global','sea','look','yes','NO','fine','document','nice','first','OK','parents','children','person','because','no way']
   const tx=document.querySelector('#tx')
   const output=document.querySelector('.output')
   let timer=null
   tx.addEventListener('keyup',e=>{
      clearTimeout(timer)
       if(tx.value.trim()!==''){
        timer=setTimeout(()=>{
          output.innerHTML=``
          output.innerHTML=arr[Math.floor(Math.random()*20)]
        },200)
     }
   })
  </script>

加上防抖节流功能如果在300毫秒内调用多次查找，只会执行最后一次可以看出在输入完内容后的300毫秒后才发起请求。

案例：图片懒加载

图片懒加载（Lazy Loading）

• 目标：避免在页面初次加载时加载所有图片，尤其是那些不在可视区域内的图片。这样可以减少页面初次加载时间，加快页面呈现速度，节省用户的流量。
• 原理：仅在图片即将进入可视区域时才开始加载该图片。可以通过监听滚动事件并计算图片位置来实现。

但是使用图片懒加载的效果并没有起到节流防抖的效果，每一次的图片申请对服务器的压力仍然是巨大的尤其是当图片较多时。那么该怎么优化呢？

当我们把刷新时间设置为300ms时，可以看到客户端对后台数据获取的次数是明显的减少的，只有当用户停止滑动操作时，才会根据用户当前视窗高度来进行加载图片，同时这个反应时间对用户而言并不长，最主要的还是减少了对服务器API接口访问次数。

因此当图片懒加载技术与节流或防抖一起使用时，可以达到显著提升页面加载速度特别是初次加载时，因为只加载可视区域内的图片。减少资源消耗通过限制检查图片可视状态的频率，降低CPU和网络资源的使用。页面滚动更加流畅，避免因频繁加载图片造成的页面卡顿。节省流量对用户来说，特别是移动设备用户，这意味着更少的流量消耗。

ini

复制代码
  <script>
     const img = document.querySelectorAll('img');
        let num = img.length;
        let n = 0
        document.addEventListener('DOMContentLoaded', () => {
          loadImage()
        })
        function loadImage() {
          let screenHeight = document.documentElement.clientHeight;
          let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          for (let i = 0; i < num; i++) {
            if (img[i].getBoundingClientRect().top < screenHeight + screenTop) {
              console.log(img[i].getBoundingClientRect().top)
              img[i].src = img[i].dataset.src
              n = i + 1;
            }
            if (n === num) {
              console.log('所有图片加载完毕')
              window.removeEventListener('scroll', timerFunc);
            }
          }
        }
        let timer = null
        function timerFunc() {
          clearTimeout(timer)
          timer = setTimeout(() => { loadImage() }, 300)
        }
        window.addEventListener('scroll', timerFunc)
 </script>

概述防抖和节流的区别：

防抖:如果事件被频繁触发，防抖能保证只有最后一次触发生效!前面N多次的触发都会被忽略!

节流:如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件，单位时间内事件只能触发一次

总结

节流要确保在一个特定的时间间隔内，无论事件被触发多少次，其对应的处理函数只会执行一次。适用于需要持续响应但不必对每次触发都立即响应的场景，如滚动事件处理。防抖在事件被频繁触发时，只有在触发操作结束一段时间后才执行处理函数。这可以避免短时间内多次触发导致的重复执行，特别适用于节约资源和避免无意义的操作。

节流和防抖组合是前端性能优化的重要工具，合理选择和应用它们可以有效提升Web应用的响应速度和用户体验。

源文：用于面试快速实现的简化版节流防抖实用场景——翻译搜索器，图片懒加载

如有侵权请联系站点删除！