防抖,从字面就可以知道,就是防止抖动。避免一次操作造成多次事件响应操作。最常见的就是我们每次敲击键盘,这就是触发防抖的操作。
便于理解,以下列举了一些应用的场景。
- 抢购,短信验证等操作,本身在后台有排队和转发延迟。这样就需要控制用户频繁点击按钮,导致多次请求。这个需要防抖。
- 输入框输入,在用户输入停止几秒后再去获取输入信息,而不是每次输入都去获取。
- 自动保存,在文档编辑,每隔几秒进行一次自动保存操作。
如下图的代码片断,重点「防抖清零 clearTimeout(timer)」
![2dee09faa5a248df61cc13fd69436838.png](https://i-blog.csdnimg.cn/blog_migrate/dea3c051b26bc33717f264a7eb6d4758.jpeg)
防抖
节流,指的是控制流量。控制事情发生的频次,比如为5s一次。与服务端(Server)和网关(Gateway)的限流 (Rate Limit) 类似。
以下的应用场景,就使用到了限流。
- 元素滚动(onscroll)事件,每隔几毫秒计算一次位置信息。
- 播放器播放信息,每隔几十秒计算一次进度信息。
- 商品预览图的放大镜效果时,不需要每次鼠标移动都计算位置。
代码片段如下,重点「节流开