用React写一个技能冷却的案例，关于节流

在前端开发中，节流（throttle）和防抖（debounce）是两个常见的性能优化技巧。它们的核心目的都是限制函数执行的频率，避免函数被高频率触发导致性能问题。

今天我通过一个"技能冷却"的小案例，带大家直观感受一下节流的作用。

1.什么是节流？

节流（throttle） ：一个函数在指定时间内只会执行一次，即使在这段时间内被多次触发。

生活类比：

游戏里的技能冷却 → 技能触发后要等几秒才能再次使用。
电梯关门按钮 → 按了之后电梯要等一段时间才会关门，多次点击没用。

这就是节流的应用场景。

2.案例：技能冷却按钮

现在写一个react组件模拟技能触发和冷却。

javascript 复制代码

import React, { useState, useEffect, useRef } from "react";

export default function List() {
  const [cooldowns, setCooldowns] = useState([
    { title: "大灭", cd: 0, maxCd: 9 },
    { title: "大米", cd: 0, maxCd: 8 },
    { title: "飞行", cd: 0, maxCd: 5 },
    { title: "大招", cd: 0, maxCd: 30 },
  ]);
  const ref1 = useRef(null);
  // 每秒减少冷却时间
  useEffect(() => {
    const timer = setInterval(() => {
      setCooldowns((prev) => {
        return prev.map((item) => {
          if (item.cd > 0) {
            return { ...item, cd: item.cd - 1 };
          }
          return item;
        });
      });
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  const handleSkill = (index) => {
    if (cooldowns[index].cd === 0) {
      setCooldowns((prev) => {
        return prev.map((item, i) => {
          if (i === index) {
            ref1.current.innerHTML = ${item.title}触发了;
            return { ...item, cd: item.maxCd };
          }
          return item;
        });
      });
    }
  };

  return (
    <div>
      {cooldowns.map((skill, index) => (
        <p key={index}>
          {skill.title} {skill.cd > 0 ? (还有 ${skill.cd}s) : "(可使用)"}
          <button disabled={skill.cd > 0} onClick={() => handleSkill(index)}>
            {skill.title}
          </button>
        </p>
      ))}
      <h1 ref={ref1}></h1>
    </div>
  );
}

下面是效果图。

编辑

效果：

点击技能按钮 → 显示"技能触发了"
按钮进入冷却，显示倒计时
冷却结束 → 按钮恢复可点

这正是节流的直观表现：在冷却时间内，你点多少次按钮都不会触发效果。

实现的原理就是只要在数组中我们的cd不为0，那么按钮disabled就为true无法去点击，以及只要不为0那么就去递减。而且递减的时候需要展示到页面上面。

3.节流 vs 防抖

节流（throttle） ：间隔时间内只执行一次（技能冷却、scroll 监听、按钮防连点）。
防抖（debounce） ：触发后延迟一段时间才执行，期间如果再次触发会重置（搜索输入框、窗口 resize）。

总结

通过游戏技能冷却的例子，我们能直观理解"节流"的含义：限制执行频率。在前端项目中，合理使用节流/防抖，可以避免资源浪费、提升性能。

所以，下次你看到按钮被"禁用一段时间"，别忘了，它可能就是节流在起作用 😎。