JavaScript实现防抖和节流

---

前言

       JavaScript是事件驱动的, 伴随着大量的触发事件操作。由于JavaScript是单线程工作机制，大量的触发事件在队列中同时处理，有一些频繁的事件处理会造成性能消耗，我们可以使用一些性能优化的方式进行事件的频繁处理。防抖和节流就是JavaScript中性能优化的方式之一。

一、防抖是什么？

使用一张图片来直观的表示防抖的概念

蓝色柱子代表事件触发，橙色柱子代表响应函数触发。
从图中我们可以看到，响应函数触发前不管事件触发执行了多少次，最后一次事件触发的等待时间没有到达指定的设定时间n（即n秒内事件再次被触发，以最后一次的触发事件时间开始计算），响应函数均不会被触发。这样一个频繁的事件处理就会被优化，减少对应的性能消耗以达到性能优化的效果。

1.1 防抖函数的应用场景

1. 输入框中频繁的输入内容，搜索或者提交信息；
2. 频繁的点击按钮，触发某个事件；
3. 

1.2 防抖函数的实现

设计简单的防抖函数思路如下：
       1.事件函数执行，先创建一个定时器。
       2.把逻辑代码放到定时器中。
       3.当函数再次触发，清除定时器。
       4.创建一个新的定时器即可。


观察发现，当且仅当用户在输入框停止输入内容的n秒后对应的逻辑代码才会执行。否则响应函数永远不会执行。在实际开发中，倘若逻辑代码中有Ajax请求执行，这就大大减少了向服务器请求次数，减轻服务器性能方面的负担，达到了性能优化的效果。

1.2.1 防抖函数优化之this指向

       现在我们有一个需求，就是使用this获取输入框的参数。先使用未优化的代码检查是否能实现该需求。我们可以发现，得到的结果是undefined，使用控制台打印this观察一下，发现this的指向是window。

       先对防抖函数代码进行分析，我们最后返回的函数是使用箭头函数设计的，此时我们要注意到箭头函数是没有this指向的，这也就导致this直接指向了window。我们将第一个箭头函数改为普通函数进行尝试。并使用apply()或call()将fn()函数的this指向为事件触发函数。

通过观察控制台可发现，this指向问题完美解决。

1.2.2 防抖函数优化之参数

      当我们需要获取到event时，设计的防抖函数是没有event这个参数的，但是oninput事件是将event传递给了mydebounce的，因此我们将arguments和fn进行绑定即可。

二、节流是什么？

      同样的，我们使用一张图片进行解释。

蓝色柱子代表事件触发，橙色柱子代表响应函数触发。
      可以从图片中观察到，当事件第一次被触发后响应函数对应触发，但是在等待时间n秒内事件再次被触发时响应函数并不会对应触发，而是当等待时间n秒过后才会执行对应的响应函数。这就是节流函数的含义。

2.1 节流函数的应用场景

函数节流的应用场景一般是:

1. 鼠标不断点击触发，mousedown(单位时间内只触发一次)
2. 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

2.2 节流函数的实现

节流函数的实现原理和思路

1. 记录事件上一次的触发时间。
2. 获取当前事件触发的时间。
3. 使用设置的等待时间减去当前时间和上一次时间的差值。
4. 当计算出来的时间结果小于等于零时，执行对应的逻辑代码。
   为了更好观察，我将等待时间改为了1000ms，每次输出对应的结果的时间差距都是1000ms的。至此 ，节流操作成功实现
   

2.2.1 节流函数优化之this指向

       因为上述防抖函数的解释，因此本处直接上代码，读者自行上机操作即可。

2.2.2 节流函数优化之参数

三、总结

       这是我在做项目时对搜索框使用到的性能优化操作，鉴于自身实力的有限，可能在文章讲解中出现错误，大家可以私信或评论指出错误。创作不易，点个赞呗。同时有任何疑问我们一起交流，一起成长。如果有更好的文章，也欢迎贴在下面哦，我们相互学习。