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

前言

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

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

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

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

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。