防抖跟节流一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。大家好,我是大

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

大家好,我是大帅子,今天我们直接给大家介绍防抖跟节流, 我们从防抖跟节流的面试题,到该如何操作做一个简单的概述

1. 介绍

防抖是指当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。

节流是指动作绑定事件后，动作触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。

2. 概括

防抖 就是用户频繁的触发同一个事件,只执行事件的最后一次
节流 就是多次触发一个事件 , 一段时间就执行一次

3.应用场景

1. `防抖` 的应用场景

主要有 : 输入框 , 鼠标滑动事件

2. `节流` 的应用场景

主要有 : 鼠标连续不断地触发某事件

3. 具体的代码

防抖 : 我这边就以react为例

// 存储防抖定时器
const timerRef = useRef(-1)

const [keyword, setKeyword] = useState('')
const onChange = (e: string) => {
  setKeyword(e)
  // 清除之前的定时器
  clearTimeout(timerRef.current)
  // 新建任务定时器
  timerRef.current = window.setTimeout(() => {
    console.log(e)
  }, 500)
}
// 销毁组件时记得最好要清理定时器
useEffect(() => {
  return () => {
    clearTimeout(timerRef.current)
  }
}, [])

aHooks的使用-防抖

aHooks

ahooks，发音 [eɪ hʊks]，是一套高质量可靠的 React Hooks 库。在当前 React 项目研发过程中，一套好用的 React Hooks 库是必不可少的，希望 ahooks 能成为您的选择。

地址：ahooks-next.surge.sh/hooks/use-d…

步骤

安装 ahooks 包：npm i ahooks
导入 useDebounceFn hook
创建防抖函数
搜索框中输入内容时，调用防抖函数

核心代码

const { run: getSuggest } = useDebounceFn(
  (e: string) => {
    console.log('搜索功能', e)
  },
  {
    wait: 500,
  }
)

const [keyword, setKeyword] = useState('')
const onChange = (key: string) => {
  setKeyword(key)
  getSuggest(key)
}

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
🐣---->🦅 还需努力!大家一起进步!!!

防抖跟节流