JavaScript中防抖和节流的实战应用记录

目录

• 前言
• 为什么我们需要防抖/节流
• 防抖
• 节流
• 总结

前言

你可能会遇到这种的情况，一个站点使用自动填充的文本框，内容的拖拽，效果的滚动。那么，你遇到防抖和截流的概率还是很高的。为了使得这些操作，比如自动填充能够顺畅工作，你需要引入防抖和截流功能。

• 防抖 -> Debounce
• 节流 -> Throttle

为什么我们需要防抖/节流

开篇已经简单提了，debounce/throttle 能让你的站点表现更优异。它们工作原理是通过减少动作发起的次数。我们简单举个例子，自动填充文本框触发接口请求，如下：

input.addEventListener("input", e => {
  fetch(`/api/getOptions?query=${e.target.value}`)
    .then(res => res.json())
    .then(data => setOptions(data))
})