编程-节流阀的使用

编程中的节流阀主要是一种编程思维，它是一种可以更好提高程序性能和执行效率的编程思路，大多数情况下程序中不设置节流阀是不影响程序正常运行的，但是可能会存在一些小BUG影响到用户的体验，所以还是很有必要学习和使用的。本文主要简单介绍一下节流阀的应用场景和实现思路：

常用场景举例：

1.点击按钮会运行某个动画的场景，此时如果没有设置节流阀则当连续多次点击按钮后，动画会造成运行队列问题，则停止点击按钮后动画仍会持续执行一段时间；

2.常见轮播图切换的问题（其实和例1很像），就是多次点击下/上一张后轮播图界面会持续执行点击切换的事件，出现轮播图的频繁切换的BUG；

3.移动端的下拉刷新或上拉触底事件，移动端的上拉触底事件常常用于发起数据请求，如果不设置节流阀，当用户上拉触发了一次数据请求后再多次的触发该事件，则多次的事件都会被执行，这样不仅会延缓加载速度，也会加大服务器的压力；

由以上例子可以看出其实问题很明显也很简单就是有的事件短时间内只需要触发一次或者不要让该事件产生事件队列的问题就好，而节流阀就可以完美解决此问题。

节流阀实现思路：通过一个变量控制一个事件是否能执行，在调用该事件时先判断当前是否可以执行该事件，条件满足则正常调用执行，条件不满足则不执行该事件。

实现节流功能的步骤

1.定义一个布尔类型的全局变量，用于表现节流阀的打开和关闭这两种状态。如下：

设置判断是否能再此执行某个事件的节流阀，值为 false 则可以正常执行，为 true 表示当前该事件正在执行中不能再次调用。

    isLoading: false

2.在事件处理函数中控制节流阀的打开和关闭状态（即控制 isLoading 的值为 true 还是 false）：

在函数中先将节流阀的值赋值为 true （即打开节流阀）

isLoading: true  // 表示当前函数正在执行中

在函数执行完毕后再将节流阀的值重新赋值为 false （即关闭节流阀）

isLoading: false  // 表示函数此次执行已完成

3.最后在需要调用事件处理函数时先判断节流阀的状态根据节流阀的状态决定此时是否能再次调用该函数。

if (this.isLoading) return  // 如果节流阀为 true 则直接 return 不调用函数
// 在这里调用事件处理函数

经过以上三步就完成了节流阀功能的使用，需要的注意的是：一定不要忘了在事件处理函数中事件处理结束后把节流阀关闭，这一点很容易忽略！

最后，希望本文能让你有所收获，感谢你的访问！

好好学习、天天向上！        ：)