00:00
Hello,大家好,这个小题呢,我们来学习一下函数的节流与防抖。那么,函数节流与防抖在做什么事情呢?其实是在控制。事件处理程序的执行频率。那为什么要控制事件回着的执行频率呢?是因为呢,浏览器当中有一些事件啊,比如说这个onre事件是。窗口的变化时间,还有呢,Mo木时间,鼠标移动时间,当然还有这个SC时间,窗口滚动时间。那么这些事件呢?它的触发频率非常非常高。比如说大家可以看一下,我这里呢,还专门写了一个这样的事例。这是我给这个窗口呢,绑了一个滚动事件,我滚一下。你可以看一下,我就滚了一下,他触发触发多少次呢?触发了12次。所以说如果说呢,我们内容比较多的话。绑定这样的事件触发频率这么高,极有可能会造成页面卡顿。
01:02
如果说在这个事件处理程序当中,还包含了与后端的交互。这样的话还会给后端呢,增加很多的压力。所以这个时候的话,函数的截流与防抖控制频率就显得非常非常重要了。那么下面我们首先先来看一看函数截流是怎么一回事。函数节流呢,其实就是控制这个事件,它执行的一个时间间隔。我们可以让它在达到间隔之后在它执行一次,而不是让它无限制这样子的按照原始的频率去执行。那么适合的场景有这个事件,SC事件啊,毛斯木事件,还有呢,Click事件。Click事件这块主要就是指的窗,就是这个商品的抢购这样的一个场景。好,那么下边的话,我们先实现一下节流,节流咱们实现完毕之后再去实现这个防抖。好,打开。我们还是就对这个案例呢做一些改进。
02:01
目前。绑定了SC事件之后,它的滚动频率是非常非常高的,我就滚一下啊,它触发的次数啊是12次。那么下边的话,我们开始来写一下。首先,我们先写一个函数。然后呢?这个刷。好,然后它计算参数呢,有两个,第一个参数就是这个回调,第二个参数呢,是这个等待的间隔。比方说我们希望他500毫秒执行一次,或者说一秒钟执行一次。啊,是这样一个参数,那好,那么里边我们应该怎么样去做来控制这个回调它的执行呢。啊,我们可以用一个时间啊。我们可以定义一个。开始时间。Let start等于个零。然后等事件在。执行的时候就处理程序,在执行的时候呢,我来判断一下当时时间与这个时间的间隔。
03:00
如果说大于等于了这个。咱们要求那个间隔啊,那就可以执行一次,如果说还没有到达这个间隔,那对不起,就不让执行。所以说,我们可以用一个开始时间和一个触发的执行时间来求一个差。来做一个判断。那好,那么在这的话呢,还是还有一个点,还有一个问题,什么问题呢?就是这个东西咱们写完之后,最后怎么去用。我先把它最终的使用形式。先放过来。然后呢,在这我把它呢换一下啊,换成这个函数调用啊R。好,它呢就有两个参数,第一个参数是咱们那个回调。第二个参数是那个时间间隔,比如说我们就定一个500毫秒。大家看一下啊。它最终的使用形式是这样子的。既然是这样子的话,我们来分析一下,你想一想这个函数它的执行返回结果是什么样子的?
04:00
啊,它应该返回的是一个函数。因为如果说它返回的是一个其他类型的话啊,咱们这个事件绑定就不成功了,所以说这块它的返回结果。啊,是一个函数。Return一个function。而且呢,大家想象一下这个函数呢。里边还是要有一个参数的。啊,这个参数当然你也是可以选的,可加可不加,就是那个事件对象。所以我们把这个事件对象呢,应该加上啊。啊,你写E也行,是写evet也可以,因为呢,这个是一个行参,你写什么都行。好了,那么这是整个的返回结果。啊,返回结果有了之后,下边我们先来做一个简单输出,比如说cano log,我们打印一个,啊,I love you,举个例子。我们来看一看它到底能不能正常去触发。好,切过来刷新。好,然后滚动一下,滚动一下。你可以看一下,我每滚一下它就触发12次啊,输出12次,那你可能会说,哎,怎么是这这这这怎么是25呢,因为他最开始呢,就先输出了一次,我一滚动,你看13减12啊。
05:09
再来25减13啊,还是12。好,这样的话呢,事件已经是触发了,但是这种写法跟原来直接那么写没什么变化。啊,没有什么影响,所以说我们应该怎么办呢?应该要去判断它的一个时间间隔。我们开始获取。当前的时间戳。Let now等于一个点now。啊,这是事件在执行时,就这个这个函数啊,它在执行时的一个时间戳,然后呢,有这个时间戳之后呢,我们开始做一个啊判断。如果说now减去start是大于等于的。然后这表明呢,这个间隔已经大于了我们设定的那个间隔了。当以这个当前代码来看的话。
06:01
我们第一次执行它是一定会满足条件的,因为咱们这是零当前时间戳这个数字很大的,所以一定会大于500或者大于1000啊,但是别着急啊,咱们待会儿会改变start它的一个值啊,作为当前那个时间,这样的话,后续的判断就不会出现这种情况。好,如果说是满足条件。啊,若满足条件。则执行回调。啊,则执行咱们的回调函数。那么回调函数在哪呢?回的函数就在这儿呢?就这个call back就是它。哎,就是它,那所以说我们怎么办呢?我们就是这样子直接call back点啊call。啊,就是我要去执行这个回调,那么执行回调的时候呢。咱们知道这个回调呢,它里边有一个特殊的点,就是this呢,是指向事件圆的。啊,那我们这块Z指向谁呢?其实在这我们不用去多考多多管它,直接写成this就可以了。
07:04
为什么形成this呢?你可以想象一下。我们现在。在这一个函数它的返回值当中啊,就是这个start,它的函数这个返回结果里边。他最后一定会放在这个位置。啊,一定会放在这个位置,所以说这个函数内部的this值就是指向事件圆的。啊,就是这样信任的,而现在我们这样一来,哎。我们回把它回过来一下啊,把它回过来一下。那么在这儿的话,我们Z。指向肾人之后就不用再动了,这个回调函数它在执行时,它内部的电也是指向它的。也是指向事件源的,所以说在这我们直接把它写成this就可以了。好,然后呢,第二个呢,是这个参数,参数是谁呢?参数其实就是一个事件对象一。啊,我们职权是谁啊,我们职权是他。
08:00
啊,执行的是这个函数。啊,就是call back,其实就是它,然后在执行时,我们可以把这个时间对象往里边一传,他其他在这其实也可以做一个接收。啊,也可以做个接收好了,这样一来的话呢,我们就把回调执行了,执行完之后呢,下边再去。修改开始时间就可以了。好,然后呢,Start就等于一个now。接下来我们来看看效果怎么样啊。然后打开浏览器。刷新页面来滚动滚动滚动,你可以看到我们每滚一次,它就触发一次。啊,它就触发一次好了,这是这个,当然我们还可以再来验证一下,看这个E到底好使不好使,Cons log打印一下E这个对象。就是事件对象。切过来,刷新一面走。没有问题。好了,这是当前呢,对于函数截流,我们做了一个实践啊,其原理就是啊。
09:03
去判断一下这个回调执行的一个时间间隔到底有没有满足,我们设定那个时间间隔,如果满足就执行,如果没有满足还小于,那对不起,就不执行。好了,那么这个小节我们就先到这儿。
我来说两句