Hi!请登陆

面试官:什么是防抖和节流?有哪些实现方式?

2021-2-24 37 2/24

通俗理解

防抖

平时我们买手机或者相机,都具有防抖功能,相机的防抖和这里防抖逻辑上是一样的。当我们拿起相机记录视频的时候,我们的手会不停的抖动,但是拍出的视频却抖的却不是很厉害,原因就是相机把n毫秒之内的抖动给忽略掉,使相机的镜头始终保持在n毫秒之前的状态。

节流

物体在的移动在空间和时间上是连续的,但是我们记录的视频却是一帧一帧的,原因就是相机忽略了n毫秒内的物体移动,以节省存储空间。这个过程可以理解为节流。

其实说明一些问题未必要举和事物本身不一样的东西,那接下来我们就拿开发网页时真是遇见的场景。

真实场景

场景

你正在开发一个用户注册页面,你家平台里规定,昵称必须唯一,但是不要等用户点击注册按钮的时候才去检查,要做到尽快的去检查。

首先我们想到,每当输入框改变的时候,我们就检查一次是否已经有人注册。如果用户很快速的输入,显然这样查询太快,对服务器压力太大。

面对这个问题,我们可以想到两个方案来解决。

1. 防抖

输入框的前后两次改变超过n毫秒才执行查询,只要改变时间间隔小于n毫秒就不执行查询。

2. 节流

n毫秒内的改变只执行一次查询。

是不是和相机的例子很像?

我们有了两种解决方案,到了代码层面怎么实现呢?我们先试试用直截了当的方式实现一下。

简单实现

1. 防抖:

可以仔细分析一下,这几行代码是不是上面的方案一。

如果在1000毫秒内,反复执行checkUsername函数,那么setTimeout就会被反复清除,并且反复设置一个新的1000毫秒的定时任务。直到你执行checkUsername的前后两次间隔超过1000毫秒,定时任务才有机会执行一次。

2. 节流:

可以分析一下这几行代码。

第一次执行checkUsername的时候,!isRuning为ture,执行关键代码,改变isRuning为true,设置一个1000毫秒后再把isRuning再改为false。那么,当你在1000毫秒内反复执行checkUsername的话,关键代码都不会执行,只有等到定时器执行后,再次执行checkUsername,才会执行关键代码。

以上代码都是直接了当的实现了需求。但是防抖和节流的需求很多,仔细分析,我们发现,有些代码属于样板代码,和业务逻辑无关,我们的业务逻辑就在TODO,所以,我们能不能提炼一下呢?

重构

防抖

分离

首先,你写了一个函数,这个函接受两个参数,参数的含义是,一个是待执行的函数(TODO),一个是时间间隔。函数返回一个函数,这个函数就会被反复调用的话,就会符合防抖的定义。

应用

这样,我们只需要关注业务代码就可以了。

节流

分离

应用

无甚好说,不复杂。有疑问,可留言。

装饰器模式

或许你的项目引入typescript,正好TS很好的支持装饰器模式,于是你想用装饰器实现该功能。讲真,这个方式更优雅。

防抖

分离

先实现一个防抖的方法装饰器。

如果不太理解装饰器的话,可以看我前面的文章,或者去网上查找。不过,我的示例,具有实际应用价值。

核心代码和上面的基本一致,这里要套用ts装饰器的语法,及在里面如何使用this。

应用

这里借助Vue项目演示。

应用无甚好说。

节流也一并写出来,无甚好说。有问题,欢迎留言。

节流

抽离

应用

总结

还有其它方式,比如观察者模式,大概思路是,不断触发的那个事件转化成自定义事件,然后在自定义事件里应用防抖或者节流把这个事件放缓,最终由观察者处理这个放缓的事件。这个暂时就不写在这里了。

其实,我们遇到问题,一旦了解问题的现象及本质,就可以搜寻自己的知识结构,找到对应的解决方案。

最后 需要这些面试资料的,可以私信 666 领取

相关推荐