JS性能优化与调试技巧 | 豆包MarsCode AI刷题HTML JavaScript 代码功能概述这段代码通过HT

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节流与防抖案例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    .box {
      height: 1000px;
      background: linear-gradient(to bottom, #f0f8ff, #ffb6c1);
    }
    input {
      display: block;
      margin: 20px 0;
      padding: 10px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>节流与防抖案例</h1>
  <input type="text" id="searchInput" placeholder="输入搜索关键字...">
  <p id="searchResult">实时搜索结果会显示在这里...</p>
  <div class="box"></div>
  <p id="scrollMessage">滚动信息会显示在这里...</p>
  <script src="script.js"></script>
</body>
</html>

JavaScript

// 节流函数
function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}

// 防抖函数
function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 滚动事件 - 节流应用
const scrollMessage = document.getElementById("scrollMessage");
function handleScroll() {
  scrollMessage.textContent = `页面滚动位置：${window.scrollY}px`;
}
window.addEventListener("scroll", throttle(handleScroll, 200));

// 输入框 - 防抖应用
const searchInput = document.getElementById("searchInput");
const searchResult = document.getElementById("searchResult");
function handleSearch(e) {
  searchResult.textContent = `搜索关键字：${e.target.value}`;
}
searchInput.addEventListener("input", debounce(handleSearch, 300));

代码功能概述

这段代码通过HTML、CSS 和 JavaScript 实现了节流（throttle）和防抖（debounce）的具体应用案例。它演示了在滚动事件中使用节流函数优化性能，以及在输入框事件中利用防抖函数减少无效操作。

HTML结构

HTML部分定义了页面的基本结构：

标题与说明：<h1>标签用于展示案例标题“节流与防抖案例”。
输入框与结果区域：一个输入框（<input>）用于模拟实时搜索，旁边的段落（<p>）用来显示搜索关键字的变化。
滚动区域：使用一个高度为1000px的 div 模拟滚动场景，另一个段落（<p>）显示滚动位置。
样式：CSS通过背景渐变和边距优化了视觉效果。

CSS样式分析

CSS代码对页面布局和视觉进行了简单设置：

body定义基础字体和内边距。
.box设置高度和背景渐变，用于提供足够的滚动空间。
input调整输入框的外观（如边距和字体大小），提升用户体验。

JavaScript核心功能

JavaScript代码实现了两个核心功能：节流和防抖。

1. 节流（Throttle）

功能：

节流函数控制高频事件（如滚动）触发的频率，确保在指定的时间间隔内只执行一次目标函数。

实现：

throttle(func, delay) 接受一个目标函数 func 和时间间隔 delay。
通过记录 lastTime（上一次执行的时间），判断是否超过指定间隔。如果满足条件，则调用目标函数。

应用：

在滚动事件中应用节流：

window.addEventListener("scroll", throttle(handleScroll, 200));

目标函数：handleScroll 显示当前页面滚动位置。
节流间隔：200毫秒。
效果：减少滚动事件触发频率，优化性能，避免频繁更新 DOM。

2. 防抖（Debounce）

功能：

防抖函数延迟执行目标函数，如果在延迟时间内事件被多次触发，则重新计时。适用于需要减少冗余操作的场景（如输入框搜索）。

实现：

debounce(func, delay) 使用 setTimeout 延迟调用目标函数，并在新的事件触发时清除旧的计时器。
只有当用户停止输入一段时间后，目标函数才会被执行。

应用：

在输入框事件中应用防抖：

searchInput.addEventListener("input", debounce(handleSearch, 300));

目标函数：handleSearch 更新搜索关键字。
防抖延迟：300毫秒。
效果：避免每次输入都触发搜索，减少服务器请求频率，提高效率。

使用场景对比

场景	技术	目的
滚动事件处理	节流	降低高频触发的负担，优化性能。
输入框实时搜索	防抖	避免频繁操作，减少无意义请求。

优化点与扩展

兼容性优化：可以扩展节流和防抖函数以支持更复杂的场景（如立即执行和延迟执行选项）。
功能扩展：节流和防抖技术可用于表单验证、按钮点击限制等其他场景。
框架集成：在 Vue 或 React 中可以将这些函数封装为自定义指令或 hooks，提高复用性。

运行效果总结

节流效果：滚动页面时，scrollMessage 每隔 200 毫秒更新一次，显著减少了滚动事件的频繁触发。
防抖效果：在输入搜索关键字时，只有停止输入超过 300 毫秒，searchResult 才会更新，避免了多余的响应。

通过这一代码，节流与防抖的应用场景得到了直观的演示。