JavaScript中的防抖与节流：提升性能的关键技巧

JavaScript 中的防抖与节流：提升性能的关键技巧

在 JavaScript 开发的过程中，我们经常会与各种高频触发事件打交道，例如窗口大小调整、滚动条滚动以及输入框输入等。倘若对这些事件处理得不够妥当，极有可能引发性能方面的问题，甚至对用户体验产生负面影响。而防抖（Debounce）和节流（Throttle）技术，正是解决此类问题的得力工具。

一、防抖（Debounce）

1.1 概念

防抖的核心思路是：当某个事件被触发时，会设定一个延迟时间。在这个延迟时间之内，如果该事件再次被触发，那么之前设置的延迟定时器就会被清除，然后重新开始计时。只有当延迟时间结束，并且在这期间没有再次触发该事件时，我们真正期望执行的函数才会被执行。这就好比你在使用自动门，当你快速进出多次时，自动门不会每次都立即关闭，而是在你最后一次通过后，等待一段时间才关闭，这个等待的过程就类似于防抖中的延迟时间 。

1.2 应用场景

搜索框输入：在用户进行搜索操作时，每输入一个字符就可能触发一次搜索请求。如果不进行防抖处理，会频繁地向服务器发送请求，这不仅会增加服务器的负载压力，还可能导致网络资源的浪费。通过防抖技术，我们可以设定在用户停止输入 300 毫秒后，再发起搜索请求。这样一来，只有当用户输入完成并暂停一段时间后，才会触发搜索操作，大大减少了不必要的请求次数。

窗口大小调整：当用户调整浏览器窗口大小时，会持续触发 resize 事件。如果在这个事件处理函数中执行复杂的布局调整操作，如重新计算元素的位置和大小、重新渲染页面等，频繁的触发会导致大量的计算任务，严重影响页面的性能。使用防抖技术，能够确保在用户停止调整窗口一段时间后，才执行布局调整相关的操作，有效避免了频繁计算带来的性能损耗。

图片懒加载：在图片较多的页面中，当图片即将进入视口时会触发相关事件来加载图片。利用防抖可以避免在图片快速接近视口边界时多次触发加载函数，只有当图片稳定在视口内一段时间后才加载，减少不必要的加载请求。例如在一个商品展示页面，有大量商品图片，使用防抖可以优化图片加载，提升页面加载速度。

WebSocket 连接管理：当网络状态不稳定时，可能会频繁触发连接状态变化事件。通过防抖，在网络状态频繁变化时不会立即尝试重新连接 WebSocket，而是在网络状态稳定一段时间后再进行连接操作，避免频繁的无效连接尝试，节省网络资源和服务器压力。

1.3 代码实现

// 定义防抖函数

function debounce(func, delay) {
   
   // 声明一个变量timer，用于存储定时器的标识
   let timer;
   // 返回一个新的函数，这个函数就是我们实际使用的防抖函数
   return function() {
   
       // 获取当前函数执行时的上下文对象，通常是调用该函数的对象，这里用this表示
       const context = this;
       // 获取当前函数执行时传入的参数，用arguments对象来存储
       const args = arguments;
       // 如果timer存在，说明之前已经设置了定时器，并且还未到达延迟时间
       if (timer) {
   
           // 清除之前设置的定时器，重新开始计时
           clearTimeout(timer);
       }
       // 设置一个新的定时器，在延迟时间delay毫秒后执行传入的函数func