『JavaScript』全面解析JavaScript中的防抖与节流技术及其应用场景

news2024/10/5 0:55:19

请添加图片描述

请添加图片描述
📣读完这篇文章里你能收获到

理解防抖（Debouncing）和节流（Throttling）的概念：了解这两种性能优化技术如何帮助我们更有效地处理频繁触发的事件
掌握防抖与节流的实现方法：学习如何在JavaScript中实现防抖和节流函数，并理解其工作原理
应用防抖与节流技术：了解在实际开发中何时以及如何使用防抖和节流来优化用户交互和提升页面性能

请添加图片描述

文章目录

一、防抖（Debouncing）
- 1. 防抖的概念
- 2. 防抖的使用场景
- 3. 防抖的实现
二、节流（Throttling）
- 1. 节流的概念
- 2. 节流的使用场景
- 3. 节流的实现
三、如何选择防抖或节流

请添加图片描述

一、防抖（Debouncing）

1. 防抖的概念

防抖是一种优化技术，用于减少短时间内连续触发同一事件时的处理次数。当一个事件被频繁触发时，防抖函数会忽略后续的触发，直到一段时间内没有新的触发发生，再执行一次事件处理器。

2. 防抖的使用场景

防抖常用于以下场景：

输入框实时搜索或自动完成：当用户在输入框中快速输入时，防抖可以确保在用户停止输入一段时间后再发起请求，避免频繁请求服务器。
地图拖拽或其他持续性用户交互：在地图拖拽等持续性用户交互中，防抖可以减少不必要的计算和渲染，提高性能。

3. 防抖的实现

以下是一个简单的防抖功能实现：
在这个实现中，创建了一个返回新函数的debounce函数。新函数内部清除已有的定时器，并设置一个新的定时器，在指定的延迟时间后执行原函数。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debounce Example</title>
  </head>
  <body>
    <input type="text" id="searchInput" placeholder="Search...">

    <script>
      // 防抖函数实现
      function debounce(func, delay) {
        let timeoutId; // 定时器ID用于清除定时器
      
        return function() {
          clearTimeout(timeoutId); // 清除已有的定时器
      
          const context = this;
          const args = arguments;
      
          // 设置一个新的定时器，在指定的延迟时间后执行原函数
          timeoutId = setTimeout(function() {
            func.apply(context, args);
          }, delay);
        };
      }

      // 获取输入框元素
      let searchInput = document.getElementById("searchInput");

      // 使用防抖处理输入框的keyup事件
      searchInput.addEventListener("keyup", debounce(function() {
        console.log("Search input changed, debounced.");
      }, 300)); // 延迟时间为300毫秒
    </script>
  </body>
</html>

请添加图片描述

二、节流（Throttling）

1. 节流的概念

节流是一种优化技术，用于限制在同一时间段内事件处理器的执行次数。即使事件被频繁触发，节流函数也会确保事件处理器在每个时间段内只执行一次。

2. 节流的使用场景

节流常用于以下场景：

窗口大小改变时的布局调整：当用户快速调整窗口大小时，节流可以确保在每个时间段内只执行一次布局调整操作，避免过度渲染。
滚动事件的处理：滚动事件可能会非常频繁地触发，节流可以限制滚动事件处理器的执行频率，提高性能。

3. 节流的实现

以下是一个简单的节流功能实现：
在这个实现中，创建了一个返回新函数的throttle函数。新函数内部检查当前时间与上一次执行时间的差值是否大于指定的延迟时间，如果是，则执行原函数并更新上一次执行时间。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Throttle Example</title>
    <style>
      .container {
        width: 100%;
        height: 100vh;
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>

    <script>
      // 节流函数实现
      function throttle(func, delay) {
        let lastExecution = 0; // 记录上一次执行的时间

        return function() {
          const currentTime = Date.now(); // 获取当前时间

          if (currentTime - lastExecution > delay) { // 如果距离上一次执行的时间大于延迟时间
            func.apply(this, arguments); // 执行原函数
            lastExecution = currentTime; // 更新上一次执行的时间
          }
        };
      }

      // 获取容器元素
      let container = document.querySelector(".container");

      // 使用节流处理窗口大小改变事件
      window.addEventListener("resize", throttle(function() {
        console.log("Window resized, throttled.");
      }, 200)); // 延迟时间为200毫秒
    </script>
  </body>
</html>