通俗理解
防抖
平时我们买手机或者相机,都具有防抖功能,相机的防抖和这里防抖逻辑上是一样的。当我们拿起相机记录视频的时候,我们的手会不停的抖动,但是拍出的视频却抖的却不是很厉害,原因就是相机把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 领取
如若转载,请注明出处:https://www.ozabc.com/keji/406066.html