大白话讲解防抖与节流

567 阅读4分钟

什么是防抖和节流?有什么区别?如何实现?

故事的起源

在讲防抖和节流之前,我们先来引入本次的主人公。董老板、Chuck、汉堡店老板娘Judi

董老板呢,是一个年少有为的小伙子,整个人优秀的很,无不良嗜好,就是爱吃芝士汉堡(记住这一点,很重要)

Chuck呢,是老董雇来买汉堡的,其他什么也没有了,哦对了,Chuck每天是开着王老板的劳儿去的。

汉堡店老板娘Judi是Chuck的梦中情人,符合Chuck心中女神的所有标准,另外开店只是喜欢,已财富自由。

好了,故事到现在可以知道的是,董老板和Judi都是年少有为的人物,只有Chuck是一个穷光蛋。

董老板吃汉堡能吃到什么地步呢?只要有就可以一直吃下去~

Chuck每天的工作就是开个劳儿去汉堡店买汉堡。每买一个汉堡就开着劳儿来回跑一趟。

久而久之,董老板开始对Chuck不满,有一天董老板实在忍受不了了,就给Chuck说:“小伙子,不是我说你啊,你开我的劳儿,一趟只买一个,你就不能多买几个?一个还不够我塞牙份儿呢,而且这一趟的油钱、车辆的损耗都够我多吃几个汉堡🍔了?“

Chuck这小伙子脑子转的还算比较快,灵光一现给董老板提了一个方案:“先去买一个汉堡,然后等5分钟,如果5分钟内能做出来新的汉堡🍔,那就继续买,并重新倒计时5分钟。直到5分钟内做不出来新的汉堡了,那我就走了”。

董老板一听,心里想“这可以啊,这一下子能买回来好多呢!”,于是清了清嗓子说:“可以,你小子这方法真不错,以后每个月给你加2块钱薪水。”Chuck一听心里窃喜:“老王八蛋,我在乎的是你那2块钱吗?我在乎的是可以多和Judi待一会儿。”

第二天按照这个Chuck的这个方案执行了,可给Chuck高兴坏了,整整在店里和Judi待了一天。可晚上回去可给董老板愁坏了,我白天一直在苦苦的等你,一直没等到,晚上要睡觉了,你给我拉了一劳斯莱斯的芝!士!汉!堡!

Chuck一听事情不太对,赶紧说:“ 董老板,那一个方案考虑不周,我又想到了一个新的方案。先去买一个汉堡,然后等一个小时,这一个小时内所有的汉堡我都买下来,然后我回来先让你吃,之后我再去。”

董老板一听,仔细斟酌了一下,发现这样不仅可以多吃汉堡了,还可以省点油钱和保养费了。就说:“Chuck啊,不愧是我看中的人,这个方案我看行!明天就按照你说的这样去办!”

第二天Chuck按照这个方案,虽然说中途回去送了几次汉堡,都是基本上还是一整天都在和Judi一起,董老板也有吃不完的汉堡🍔了!

未完待续......

敲黑板划重点了

看完故事不过瘾啊?没关系,先把下面的东西看了,故事嘛,多的是!

以上出现的三位角色小伙伴们可能已经猜出来对应的角色是什么了。快验证一下你的猜想对不对。

董老板---服务端

Chuck---负责通信的,也就是跑腿的

Judi---客户端

防抖

所谓防抖,就是故事中的Chuck提出的第一个方案。其本质是,如果某一个功能在一个设置好的倒计时内被再次触发,那么倒计时重新开始,直到倒计时顺利结束

节流

所谓节流,就是故事中的Chuck提出的第二个方案。其本质是,某一个功能在触发后设置一个倒计时,倒计时结束后什么也不管,就直接执行,无论有结果没结果。

应用

啊说了这么多,那防抖和节流到底是用来干嘛的?

其实就是用来减少一些操作的频率,降低一些开销!

就拿百度的搜索框来说,如果我们每输入一个字符,就会向服务器请求一次,那么我们可以确定的是,服务器的压力会无与伦比的大。就像故事中,王老板再有钱,也顶不住Chuck那样开劳斯莱斯。

实现

下面我提供一个防抖和节流的demo

写在最后

感觉这个更容易让人了解防抖、节流以及使用场景,如有雷同望谅解!