跳到主要内容

1 篇博文 含有标签「防抖」

查看所有标签

· 阅读需 5 分钟
熊滔

防抖与节流是两个出于性能考虑提出的概念,如果在短时间内多次触发同一函数,可能会产生页面的卡顿,以及性能的降低,针对这种情况,提出了防抖与节流两个解决方案。

防抖与节流的概念

为了解释如上的两个概念,我们以一个例子开始。有一个搜索框,当用户输入搜索内容时,会同时向后端发起请求,给出相近的词条以给用户提示

如果当每次用户输入一个字符都向都端发起一个请求,那么发起请求的次数就太频繁了,这时有两种策略:

  1. 当用户停止输入一段时间后,例如 500ms,我们向后端发起一个请求
  2. 每隔固定的时间向后端发起一个请求

第一种策略我们叫做防抖,第二种策略我们称为节流。

有一个形象的比喻,以公交车发车为例,有两种发车方案:

  1. 当乘客上车后,如果经过一段时间没有乘客上车了,就发车
  2. 发车时间固定,每隔一段时间发一次车

我们将发车比喻为向后端发起一个请求,那么这两种发车的策略就分别对应为防抖和节流。