JavaScript防抖和节流应用

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

JavaScript防抖和节流应用

Jimmy   2022-06-03 我要评论

前言

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

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

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

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

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

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们