00:00
哈喽,各位小伙伴们大家好,那么我们刚刚啊讲了一下子防抖,那么什么是防抖啊。那也就是说前面的所有的触发都被取消。最后一次执行,在规定的时间之后才会出发。也就是说,如果连续的快速的出发,他只会执行一次,也就是说最后会执行一次。就跟刚刚咱们举的那个例子是一样的。比如说用户搜索一个产品,叫做小孩的奶瓶。那当然,你不可能输入一个小发一次请求,孩发一次请求,那当然是用户输入完搜索内容之后发一次请求,获取数据之后经展示即可。对吧,所以说这是防抖。那么,什么是节流呢?那咱们呢,先看一下的截流的概念。
01:00
那首先说在规定的间隔时间范围内。不会重复的触发回调。只有大于这个时间间隔才会触发毁掉。把频繁的触发变为少量的触发。那我相信很多小伙伴读完他的概念之后还是一脸懵逼啊,不知道他在说什么,也不知道在哪种场景下会使用。那所以说啊,老师呢,把这个概念呢,我给你带走。咱们呢,还是通过一个小DEMO去理解一下节流。那这里啊,老师呢,新建一个啊小项目,比如说咱们的叫做零二叫做节流。那专门呢,通过这个案例呢去理解节流。那这里啊,老师呢,把概念呢,先给它放在这里,指是他。但是啊,咱们呢,还是要稍微读读什么是节流。
02:04
在规定的间隔时间范围内,就比如说什么叫做间隔时间范围,比如说一秒之内。对吧,比如说总共时间是五秒,那我分为五个段,一秒是一个段,一秒是一个段。对,不那么在一秒之内,假如说不会出出重复的触发回调,就比如说一秒之内我只能触发一次。对,不,只有大于这个时间间隔才会触发回调,就比如说第二秒的时候,OK,我再执行一次。那也就是说把频繁的触发变为少量的触发,其实最后这句话是很重要的。就是把频繁的触发变为少量的触发。那咱们呢,还是举个例子,当然咱们呢,先把咱们这个小DEMO给他运行一下,当然现在应该是一个空白的一个项目。对吧,那这里呢,老师呢,也给它关掉。那咱们呢,就通过一个DEMO去理解节流,举个例子。
03:03
老师呢,要搞一个叫做计数器,比如说咱们来一个he,叫做我是计数器。那当然啊,起始呢,它呢有一个数字,比如说是零,哎,这没问题。那一集啊,老师呢,再来一个按钮,比如说点击我加上一。对吧,那咱们呢,去完成这样的一个小案例,你看啊,我是计数器是零,那么当老师点击这个按钮的时候,我要让这个数字加一。那这个它比较简单。对吧,那咱们先一样来,那首先说啊,咱们呢,先获取节点,哎,获取节点就比如说SPA和but,那咱来呗,Let一个SPA。等于document的点query select咱们的这个SPA。那一级啊,还有咱们的这个按钮button,那咱们也获取一下light,一个button等于document的点query select咱们的button。
04:08
对吧,那当然啊,老师呢,一点击这个按钮,我要让这个死SPA的文本呢加一,那所以说老师呢,再来一个全局变量,比如说叫抗其尔是几呢,是零。那么当你点击这个按钮的时候,比如说on click。对吧,那当然它有相应的回调,当你一点击的时候,我让count加加,那么它变化后的值呢?作为SPASPA的文本,对吧?比如说span打点in呢?HTML等于count。那这样一个非常简单的一个计数器的这样一个DEMO,咱们完成了。对吧,那咱们呢,就通过这个案例呢,去完成对于节流的,哎这个理解。谁说咱读读啊。在规定的间隔时间范围内,不会重复的出发,毁掉啥意思呢?就举个例子。
05:07
现在呢,老师呢,有一个需求,就是咱们这个计数器啊,在一秒啊一秒以内。一秒以内。对吧,那么它的数字啊,数字只能加上一。啥意思呢,就是咱这个计数器啊,你在一秒之内,我不管你点击一次还是100次,它的数字只能加一。对不,你看就比如一秒,比如说老师快速的点击100次,你一秒之内点击,如果连续快速点击100次,那是不是累加到100。但是我的要求是什么呢?就是在一秒之内,我不管你点击多少次,OK,它只能加一。那也就是说啊,咱们的这个回调函数,它只能在一秒之内执行一次。我不管你用户的行为多么快,OK,一秒之内只能执行一次。
06:02
对吧,其实这个场景呢,在很多地方都会用到,举个例子,比如说轮播图啊,你看老师来给你们找一下淘宝这个轮播图,其实如果你有一定的前端的基础啊,写轮播图你们应该知道啊,就是咱们最开始不知道你们有没有写过JQ的轮播图,如果用户点这个按钮过快的时候,诶图片图片会乱找。对吧,如果你学过GQ,学个安妹的,写过这种轮播图,你深有体会的就是如果说你慢慢点,OK图他能正常切换,那如果说用户的行为在一秒之内,比如说点的很快,那图片乱七八糟的。所以说有的时候人家会要求,诶,你这个按钮只能在一秒之内点一下,只切换一张图。就跟咱这个案例是一样的。对吧,那么如何实现。那咱们看一下他用的也是low dash。那咱们呢,引入一下low大sH,应该是点杠GS下的这个low大点JS。
07:05
那咱们呢,可以看一下它的文档。在low大sH这个中文文档当中啊,它呢还有一个函数叫做。啊,叫做节流函数。那首先说第一个参数是什么?是回调,是需要截流的函数。第二个是你需要截留的时间。对不?第三个是一个配置对象,其实它使用的语法呀,和咱们的Bo很像。那也就是说啊,咱们可以看下这看这这块可以怎么玩的,这么玩,哎老师把这块代码给他带走吧。你看啊,老师给你搞一下,就是杠打点t rotro,它呢也是需要传回调的,就是截流的这个函数,以及截流的时间。对不,那老师呢,把同样的代码呢,我也给你放在这儿,以及老师呢,在这儿呢,我也给你打印一下子你看啊,比如说哎,叫做执行。
08:04
你看老师呢,快速频繁的去操作,点击这个按钮,你看在一秒之内,你看知道。虽然老师点的频率超级快,但是你会发现这个回调它只是一秒执行一次。对不?你看如果老师不加上这个截流的操作,你看一下吧,你只要点击一次,它就会执行一次,你可以看一下,你可以对比一下它两者的频率。对不?conso.log比如说老师来一个叫做执行,你看它是什么,只要用户点击这个按钮,OK,那回调就会立马执行。对,不执行的频率还是很高的,你看如果老师按照刚刚的这种写法截流。啊对吧,那这块咱搞一下子点杠对吧,点杠GS下的这个low大。如果说你给他的结上零,你看啊杠打点TH。
09:00
对吧,当然这里面咱们写一下吧,截留的时间呢,这回老师呢,给他搞五秒。那就是说你这个回调呢,只能五秒才执行一次,你看span打点in HTML等于count。你看老师能给你来一个打印对吧,比如说叫做什么叫做执行。哎,执行咱们呢,可以测试一下,你可以看一下,你看啊,老师不管怎么狂点,他在五秒之内只会执行一次,过了五秒之后你再点它才会再执行。对吧,所以不管你怎么频繁的操作,它五秒之内只能执行一次。对吧,所以你自己再回首看一下这句话。在规定的间隔时间范围内,不会重复的触发回调,就举个例子,咱们的这个截流时间是五秒,就是五秒之内它只能执行一次,我不管你用户操作多么频繁,他只能五秒执行一次。只有大于这个时间间隔,也就是说只有大于五秒了,你才会触发下一次。
10:03
那把频繁的触发变为啥少量的处罚?那说白了,你节流,咱做一下笔记节流。哎,节流节流,也就是说目前的这个回调函数是五秒执行一次。那假如,哎,假如这里面有很多的业务代码,那你是不是可以给浏览器,哎很充裕的时间去解析。对吧,哎时间咋的,哎去解析。所以说我就让他多长时间呢,五秒执行一次。但是这块呢,你一定要有区别,什么区别呢?什么是防抖。什么是防抖?就是虽然用户操作很频繁,用户操作很频繁。
11:04
对,不但是只执行几次,只是哎执行一次,最后我执行一次。那么什么是节流呢?咱们也做一下笔记,就是节流。对不用户操作很频繁。但是他会把频繁的操作,频繁的操作变为啥,变为少量的操作。可以怎么呢?哎,可以咋的,是不是可以给。浏览器有充裕的时间。解析代码,哎,时间解析代码。对,不说白,就是在规定的时间范围内只能执行一次,对吧,比如五秒执行一次对吧,第一个五秒你执行了一次,那第二个五秒的时候你再执行一次,它可以执行很多次,只不过咋的呢?只不过在规定的时间范围内只能执行一次。
12:04
而防抖是什么?我不管你时间多么长,我只能执行一次。对吧,所以说这两者呢,要区别一下,所以说这是咱们的一个节流叫做RO。好了,这是咱们对于防抖和节流的一个认知,当然节流它底层的原理也是一样,节流你如果想用原生的GS去实现呢,也是一样,也是需要通过B包加上啊,这个延迟器能实现。好吧,所以说这是咱们对于防抖与节流的一个认知,所以说最后呢,再总结一下什么是节流。就是把频繁的触发变为少量的触发,说白了,给啥?给咱们的浏览器有充裕的解析时间去解析这里的代码。对吧,这是咱们的一个节流的认知。
我来说两句