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

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

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

---

1.什么是节流？

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

生活类比：

• 游戏里的技能冷却 → 技能触发后要等几秒才能再次使用。

• 电梯关门按钮 → 按了之后电梯要等一段时间才会关门，多次点击没用。

这就是节流的应用场景。

2.案例：技能冷却按钮

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

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）。

---

总结

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

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