JavaScript实现防抖和节流

爱打篮球的代码仔。

已于 2023-04-01 10:46:13 修改

阅读量2.2k

点赞数 3

文章标签： javascript 前端性能优化

于 2022-11-24 11:34:24 首次发布

本文链接：https://blog.csdn.net/weixin_51422386/article/details/128012000

版权

前言

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

一、防抖是什么？

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

1.1 防抖函数的应用场景

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

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秒过后才会执行对应的响应函数。这就是节流函数的含义。