023-尚硅谷-尚品汇-函数防抖的理解

Hello，各位小伙伴们，大家好。那接下来啊，咱们呢，去聊一聊函数的防抖与节流。那么在刚刚啊，咱们呢，也演示了，如果用户的行为过快，可能会导致出现卡顿的现象。那么如何去解决这种情况呢？很简单，就需要利用到函数的防抖与节流的技术。那所以说啊，咱们呢，花点时间去把防抖与节流呢，给他认知一下。那咱们先聊聊谁呢？先聊聊防抖。那咱们呢，先读一下它的概念。谁先说什么是防抖？那么前面的所有的触发都被取消。最后一次执行，在规定的时间之后才会出发。也就是说，如果连续的、快速的触发只会执行一次。

那么我相信很多小伙伴读完这句话满脸懵逼说，老师，我读完之后也没有理解他是什么意思，没关系。咱们呢，会通过一些小DEMO去解释什么是防抖。而且呢，这里呢，老师呢，要多说一嘴，防抖与节流在工作当中使用的频率呢，也挺高的。以及在面试的时候啊，出现的频率呢，那也是非常高的。所以说防抖截流这里啊，要稍微去认真去听一听。那这里呢，咱们呢，再去读一遍，你看什么是防抖。前面的所有的触发都被取消。最后一次执行。在规定的时间之后才会出发。也就是说，如果连续的快速出发只会执行一次，其实最后这句话是很重要的。

那也就是说，用户如果连续的快速触发，OK，你触发了100次，很快的触发，但是你要注意他只会执行一次，这叫防等。所以说老师呢，把这句话呢，我给他带走。啊，咱们呢，去拿一个小场景去理解方等。那么老师呢，在桌面当中新建了一个文件夹，就是专门去讲防抖截流的。那这里啊，咱们呢，给他拖到咱们的Vs code当中。当然咱们这个项目呢，老师就给他关闭了。咱们呢，去新建一个文件，比如说就叫做index，点谁呢index.html，或者咱给他起个名吧，就叫做零一防等。对吧，哎，防抖。那这里啊，老师呢，先把人家的这个术语我先给你放在这儿，咱们呢，就对着这句话给他理解一下什么是等等。

好了，那咱们呢，先给这个小案例啊，先给它运行起来，当然现在是一个空的一个页面，什么都没有。老师呢，举一个场景。那么我相信很多小伙伴都应该见过类似的功能，比如说用户搜索对吧，比如说你搜小孩的奶粉。那当用户在这输入的时候，你要注意一件事儿，那你是不是得向服务器发请求对吧？而且很多电商平台是不是也有类似的功能，给你提供一个表单元素文本框。你在这里呢，进行输入你想要买的东西，那当然你得向服务器发请求，服务器返回相应的数据，是不是进行展示。那所以说咱们得模拟一下你看啊。老师呢，在这里呢，放一个P标签，比如说来一句话叫做请你输入你搜索的内容。那么旁边啊老师呢，就给他放一个input。

对吧，那咱们呢，去刷新去看一下，这是没问题的。那这块呢，你要琢磨一件事啊。那比如说人家让你啊，输入你要搜索的内容，比如说咱就搜小孩的奶瓶。啊，奶瓶，那老师问你啊，你看这两种情况哪个更合理，举个例子。第一种情况就是只要有文本的变化。对吧，你只要有文本的变化，我就向服务器发请求，获取服务器的数据进行展示，那还是说第二种情况就是啊，用户输入完毕对吧，比如说小孩的奶瓶，用户输入完毕之后再发请求。对吧，获取数据进行展示，你要注意这两种情况是不一样的。第一种情况是什么呢？只要有文本的变化，就像服务器发请求，比如说小发一次，孩发一次的奶瓶，一共发五次。

对不？而第二种情况是什么呢？是用户都输入完毕之后，OK，你带着这个参数向服务器发请求，获取数据进行展示。那当然第二种情况更合理，因为咱们应该知道，那你最终要展示的是什么？展示是用户输入的这个关键字的内容。所以说，你只需要发一次请求，获取数据进行展示不就行了吗？对吧，那咱们呢，模拟一下你看啊，那当然咱们呢，需要在GS当中获取这个节点，那咱获取一下。比如说light，一个咱们就叫做input，等于document.query select，谁呢，Input？INPOT。那接下来呢，咱们呢，给他绑定一个事件，比如说哎，文本发生变化，立即执行的事件。那就是说可以给这个表单元素啊，绑定一个事件，叫做on input事件。

这个事件呢，要注意一件事，只要有文本的变化，他就会立即执行一次，比如说阿贾克斯对吧，哎，发请求。你看他只要有文本的变化，它就会执行。对不，你看咱可以刷新，可以看一下，你只要有文本的变化，它就会立马执行一次。对吧，你看那假如说老师要搜的是小孩。的奶瓶，那如果说真的要发请求，你看咱还没有做防抖呢，一共是发了这么多请求。那如果说你要做了防抖，应该只发几次，只发一次，在用户输入完毕之后发一次即可。对不，哎，那所以说第二种情况是更合理的。那怎么去完成防抖与节流当中这个防抖的业务，那这里老师说一下。咱们这里面呢，利用到了一个插件叫做low dash啊，就是谁呢，就是老师已经准备好这个文件叫low dash。

对吧，那这块呢，老师呢，也做一下笔记，首先说lo low dash啊这个这个这个插件。它里面啊，哎里面封装了函数的防抖与节流的业务，哎，与节流的业务。当然，如果说你自己想去封装一个防抖或节流，那你这两个知识点你得会，就是B包。对吧，还有谁延迟器啊延迟器。当然咱们在项目当中呢，那就是人家已经封装好的这个了，叫low。那么low大这个插件呢，你可以去NPM去下载，下载它的源码也可以呢，去它的官网地址去进行下载，这都可以。对吧，那么low大师这个函数库里边包含的功能呢，还很多。对吧，几乎常用的它都有，比如说像数组的驱虫啊。

找到数组当中最大值最小值啊，对吧，函数的防抖与节流啊等等，像这些常用的功能它都封装。对吧，所以说这个插件呢，你可以去官网去进行下载，也可以通过NPM去下载都可以。那所以说啊，咱们去引入low大使啊lo sh，那这种引入呢，就是low大使。对吧，哎，全部的这个功能都引入了。对吧，因为它的功能不仅仅说只包含防抖接流，其他的比如说像这种uniq啊，数组驱虫啊，它都包含。对吧，那这里呢，要注意一件事，那咱们得引个包script。对吧，那src那应该是谁呢？是咱们的点杠GS下的lowsh.JS。对吧，但是这里呢，有几件事要说说第一个。就是low大使load low大函数库。

函数库对外暴露的是一个叫做下划线函数。就跟JQ是一样，JQ对外暴露的是Dollar函数。对吧，咱们呢，可以打印一下，它暴露的是一个函数对象，就叫做大。咱们可以看一下。对吧，那这块呢，咱们呢，给他诶重新复制一下它的路径，咱们可以瞄眼对吧，那这块呢，要注意减少low大时，这个函数库对暴露的是一个下划线，它是一个函数对象叫low大sH。对吧，那么想用它的防抖呢，咱们呢，可以看一下它的API。就是谁呢？就是关于这个函数，函数当中呢，有一个方法叫做de Bo，对吧，函数对象它是有个Bo方法。对吧，这个呢，就是防抖函数。那咱们呢，去看一下它的一个参数啊，你看人家这有说明对吧，第一个参数叫做fun nc是一个回调，他们是要防抖动的函数。

第二个参数呢，是wait啊，需要延迟的毫秒数。那第三个参数呢，它的是一个配置对象对吧，人家参数有说明，以及底下怎么用，人家也教你了。那这里面呢，咱们看一下，虽然说杠它是一个函数对象，它呢是有一个方法叫做Bo。Debc对吧，它是有这样的一个方法叫做deb函数，那么函数一直行，OK，你看啊，函数一直行，你可以给人穿参。对吧，可以穿参，比如说要防抖的函数是谁。对吧，多少毫秒之后执行一次，比如说来个一秒，当然它还有配置对象，这里咱就不搞了。但是你要注意，当B函数一执行OK，它会返回一个函数。你看老师light一个result。

对吧，这个result就是box函数返回的结果。你看老师可以给他打印一下的，你看它是有返回值的。刷新它是有返回值的。对，不叫做de Bo多了个底。对吧，那咱们可以在这个函数当中呢，你看老师给他打印一下console。点，比如说我在一秒哎之后。执行一次。对不，那这块呢，你看当这个造的函数一定要用OK，一秒之后会执行一次。咱们可以刷新看一下。对吧，那所以说咱们这里面呢，就可以用到这个防抖，那怎么用呢？你看就是把它相应的这个回调函数给它去掉。又替换成谁呢？替换成deb bebc deb函数返回的这个结果作为它的事件处理函数。那当然，你需要传入需要防抖的函数，以及需要这个延迟的时间。

那这里呢，老师呢，给你们打印一下conso.log哎，比如说阿贾克斯发请求。那这回呢，咱们呢，可以看一下呢，你看啊，这回防抖是不是就做OK了。比如说老师说叫小孩的奶瓶。你看是不是用户的行为过后。一秒之后执行一次。对不？那当然比咱们以前更合理，你只要有文本发生变化就发情，是不是更合理，是不是用户输入完毕之后，比如说你输入的是123，用户输入完毕之后，OK，执行一次。所以说你自己回首再看这一句话，你自己看看。前面的所有的触发都被取消，你看啊，举个例子，现在老师输入小孩的奶瓶，你看前面所有的这个事件是不是都被取消了。

对不比就说前面的所有的触发都被取消。最后一次执行在规定的时间之后才会触发，就是最后一次是在一秒之后，你用户输入完之后，一秒之后才会触发。对不？你再读读这句话，最后一次执行在规定的时间之后才会触发，是不是一秒之后才会触发，什么时候用户输入完毕，因为前面的都咋的都给它进行覆盖了，因为这个函数你只要执行一次会返回一伪造，执行一次返回一个伪造的，那伪造是不是被覆盖了，是不是被替换。对吧，也就说白了，是不是被取消了，那最后一次执行在规定的时间之后才会出发，多长时间一秒之后。那也就是说，如果连续的快速出发只会执行一次。那你看咱这个防抖是不是只是执行一次，当用户输入完毕之后，前面的所有的触发都被取消。只有用户输入完毕之后，延迟一秒之后才会执行一次，那你看这不就是防抖。

对不？所以你在读的这句话一定要给他理解了，前面的所有的触发都被取消，就比如说小孩的奶瓶，对吧，你触发的很频繁，都被取消了，最后一次执行是在什么时候，是在用户输入完毕之后，在一秒之后才会触发，而且它只会执行一次，所以说这是人家low dash已经给你封装好的这样的一个防抖函数。当然老师也说了，如果你自己想去通过JS去实现这个防抖的业务，可不可以，可以，但是你得会两个知识点，一个是B包，另外一个是延迟器。所以说这是咱们对于防抖的一个理解。