当前位置:  首页 互联网 详情

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下

发布来源:互联网    发布时间:2021-02-24 21:23

通俗理解

防抖

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

节流

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

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

真实场景

场景

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

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

1. 防抖

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

2. 节流

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

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

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

简单实现

1. 防抖:

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图1)

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

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

2. 节流:

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图2)

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

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

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

重构

防抖

分离

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图3)

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

应用

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图4)

节流

分离

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图5)

应用

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图6)

装饰器模式

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

防抖

分离

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

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图7)

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

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

应用

这里借助Vue项目演示。

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图8)

应用无甚好说。

节流

抽离

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图9)

应用

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图10)

总结

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

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

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图11)

面试官,但是防抖和节流的需求很多,我们先试试用直截了当的方式实现一下(图12)

本文相关词条概念解析:

节流

流体在管道内流动,遇到突然变窄的断面,由于存在阻力使流体的压力降低的现象称为节流。因为缩处存在着摩擦,使部分动能转换为摩擦热,所以蒸汽节流时,其状态和参数都发生变化。1852年,焦耳和汤姆逊设计了一个节流膨胀实验,使温度为T1的气体在一个绝热的圆筒中由给定的高压p1经过多孔塞(如棉花、软木塞等)缓慢地向低压p2膨胀。多孔塞两边的压差维持恒定。语出《荀子·富国》:“百姓时和、事业得叙者,货之源也;等赋府库者,货之流也。

相关资讯

相关推荐

网友评论