函数节流与防抖

[diamont1001]

节流

举个例子，我们玩过王者荣耀的都知道，很多英雄的技能基本上都有一个冷却时间（简称CD），在CD时间内，技能只能放一次，放完之后，用户再去点击技能是无效的。

回到前端开发，比如页面上的一个获取验证码的按钮，一般来说都会有 60秒的限制，也就是说，60秒内用户只能点击获取验证码一次，然后就变灰了，60秒后才可以再次获取；

这就是节流。

当然，还有很多场景是要用到节流的，比如：

• 滚动加载、加载更多的按钮、滚动到底部的监听
• 搜索框的搜索联想功能
• 表单提交

防抖

举个例子，商场的自动门，当有人通过的时候自动门会自动打开，并会保持一小段时间（比如15秒），如果这15秒之内再没人通过，那么门会自动关上；但是如果在这15秒之内不断有人通过，那么门会一直开着，每次人通过后都会继续等待15秒；然后在最后一个人通过15秒之后，才会自动关门。

对于自动门来说，这15秒的时间就是用来防抖的，防止自动门进行没必要的关闭操作。

同样的，在前端开发过程中，我们也经常遇到类似的情况，比如 resize、input、scroll 等这些触发次数比较频繁的事件，如果不采取防抖措施的话，这些高频的事件会频繁的响应，不但浪费资源，还会大大影响页面的性能。

这个时候，就需要对这些事件的响应函数做防抖了。

怎么做？具体思路：

触发高频事件后，他的响应函数不是马上执行，而是在延时 n 秒之后才会执行一次，如果 n 秒内事件再次被触发，则重新计算时间。

这就是函数防抖的实现方法。

而具体的实现代码，可以百度或者google一下，很容易搜到的。

防抖与节流结合

当然，防抖还有个问题，就在于它太有“耐心”了。试想一下，如果用户的操作十分频繁而持续，持续的延迟会导致用户迟迟得不到响应，这就导致了‘页面卡死’的假象。

为了解决这个问题，我们可以借鉴节流的思想，打造一个‘有底线’的防抖。

具体怎么做呢？

在规定时间内，我可以为你重新生成定时器并去等待；但是我总不能一直等下去，我可是有时间底线的，只要总的等待时间一到，我必须要给用户一个响应。

这就是‘防抖与节流结合’的思路，这个思路目前已经被很多成熟的前端库应用到了，具体也可以去了解一下。

总结

• 节流：为了限制用户想连续触发的意图，比如英雄技能的CD
• 防抖：为了节约高频函数的执行次数