节流和防抖

因为在浏览器中调用某些方法频率比我们想象中的要快，这样会损失一部分性能，处理不当或者放任不管就容易引起浏览器卡死。所以我们就会用到节流和防抖，他们其实属于性能优化的方法。

我做过的一个简单的应用就是监控浏览器上下滚动位置，但浏览器执行的频率太快，防抖就是给出一个时间，在这个时间里如果再次触发这个函数，就重新计时，知道这个时间内没有再次触发这个函数，就执行。

结果就是，在短时间内触发大量的同一事件，只会执行一次。

这里我们就用到settimeout函数了；

代码如下：

防抖函数

首先判断是否有定时器timer，如果有，就清除定时器；如果没有，那就设定一个定时器timer。当重复执行此函数时，在delay的时间内重复判断上面的情况，直到delay时间内，没有再清除定时器timer后，执行函数func。

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。说白了就是，我可以控制他的输出频率，比如：我想让他10秒输出一次或者1秒输出一次结果。

那么怎么实现呢？

有两种方法：一个是时间戳的方法，一个是settimeout的方法。

我们先来说settimeout的方法：

节流函数

先判断是否有timer，如果没有，就设定一个定时器去执行，在设定的这个定时器delay时间内，如果再次触发了这个函数，就会忽略，知道delay时间过后timer执行完后悔再次重新设定timer。我们通过设定delay来控制输出的频率。

另一种方法是时间戳的方法：

这块我借用https://www.jianshu.com/p/c8b86b09daf0这篇文章中的时间戳方法。

时间戳方法

这个就会说会重复判断now-previous>wait这个条件，如果当前时间减去上一个执行函数时间大于我们所设定的输出频率时间，就会输出结果一次，同时将这次输出结果的时间设定为previous，如果now-previous<wai,则不会输出结果。重复执行这个函数。

上述内容基于防抖和节流的核心思路设计了简单的实现算法，但是不代表实际的库的源码就直接是这样的。

如果内容有错误的地方欢迎指出（觉得看着不理解不舒服想吐槽也完全没问题）；如果有帮助，欢迎点赞和收藏，转载请征得同意后著明出处，如果有问题也欢迎私信交流。