防抖与节流是两个出于性能考虑提出的概念,如果在短时间内多次触发同一函数,可能会产生页面的卡顿,以及性能的降低,针对这种情况,提出了防抖与节流两个解决方案。
防抖与节流的概念
为了解释如上的两个概念,我们以一个例子开始。有一个搜索框,当用户输入搜索内容时,会同时向后端发起请求,给出相近的词条以给用户提示
如果当每次用户输入一个字符都向都端发起一个请求,那么发起请求的次数就太频繁了,这时有两种策略:
- 当用户停止输入一段时间后,例如 500ms,我们向后端发起一个请求
- 每隔固定的时间向后端发起一个请求
第一种策略我们叫做防抖,第二种策略我们称为节流。
有一个形象的比喻,以公交车发车为例,有两种发车方案:
- 当乘客上车后,如果经过一段时间没有乘客上车了,就发车
- 发车时间固定,每隔一段时间发一次车
我们将发车比喻为向后端发起一个请求,那么这两种发车的策略就分别对应为防抖和节流。