前端必备技能之----节流

（引言----和大佬们出去吃饭总是会有收获的，这个知识点是我之前从未考虑过的事情，但是在现代的设计开发之中却是非常重要且使用频率非常之高的两个概念。）

作为一个前端的初学者，因为之前淋过雨，所以想为同样在雨天行走的人打一把伞。
首先我们看到一个问题，不能盲目的直接去搜索它的答案，尤其是前端来说，首先你得考虑为什么要用它，而它又可以用来哪些地方？不仅仅希望我们大家只是单纯的死记硬背，而是去真正的理解它。下面进入正题：

---

节流是什么？

你暂时不需要理解这两个词的字面意思，首先思考这样一个问题。假设有下面这样一个场景：

1.你设计了一个表单，这个表单提交的数据内容很多。

2.你的有些用户闲得很无聊，写完表单以后疯狂点击提交按钮。

3.你的后端同事走到你面前指着崩溃的服务器来向你抱怨。

这时候你会怎么做？
OK我选择当场辞职

提个醒，你打游戏你放了某个觉醒技能，那这个技能还会让你第一时间继续放吗？对没错，就和你打游戏一样，你的大招需要冷却时间才能放，如果你能一直放某些高伤害技能，那这游戏还有什么难度？过不了多久玩家就感觉无聊纷纷退游了。

所以我的第一想法肯定是给这个button一个冷却时间。
这就简单多了。下面我用伪代码来先构建出我们即将要写的真实代码的逻辑思维。

现在在我面前的有两个东西：一个按钮🔘提交的功能，一个冷却时间，假设为5秒（根据实际工作设置）。

牵扯到时间会让我第一时间想到 setTimeout和setInterval，首先排除setInterval，因为提交表单这个功能我不希望它循环执行，所以我选择setTimeout。

假设你现在正在玩游戏，游戏有一个技能，是幻影剑舞，它的技能CD是两秒，那么我们就需要判断用户是否在两秒内多处点击了这个技能，如果多次点击，那么无事发生(返回一个空函数)，如果不在CD，那么返回这个技能的特效(技能执行的函数)

这里我用控制台输出作为展示，我给这个按钮点击事件返回一个consoloe.log（）函数。让它在控制台上输出我是否释放了。

在这里我们需要知道cdTime这个函数只是一个外壳函数，它真正的意义在于传递我们需要的参数，它并不是我们希望onclick真正要执行的函数！（这个解释在我的文章：高阶函数和回调函数的区别里有说明，在这里不再过多解释）。

现在我们设计cdTime，也就是我们限制 幻影剑舞 只能在两秒之内释放。"不行，cd中"都是我在两秒之内按的。

详细代码如下

在这一步你需要明白一点,红色框内的函数，才是我们真正希望执行的那个函数

还是那句话（这个解释在我之前的文章：高阶函数和回调函数的区别里有说明)
**

其实节流的方法不止这一个，但是整体实现思想都是类似的，如果你弄懂了这些代码，你就掌握了节流的思路。