一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。
总结一下防抖和节流的应用场景
防抖： 搜索框的联想功能、手风琴
节流: 鼠标的移动、页面滚动条、窗口缩放
比如我们的需求是，对搜索框的联想功能进行防抖
我们先手写一个react的防抖
给搜索框注册一个onChange事件
<SearchBar onChange={onChange} placeholder="请输入关键字搜索" />
//用useRef存定时器的ID，给个-1不会有什么影响，给个null，ts会报错需要额外处理
const timeRef = useRef(-1)
//定义suggestion用于存储联想数据
const [suggestion, setSuggestion] = useState<string[]>([])
const onChange = async (e:string) => {
// 一进来就先清除上一次的定时器
window.clearTimeout(timeRef.current)
// 清除完后在开启一个新的定时器
timeRef.current = window.setTimeout(async () => {
//发送请求获取联想数据
const res = await getSuggestion(e)
//存在state中
setSuggestion(res.data.data.options)
}, 500) //防抖的时间是500ms
// 在这里拿suggestion的值还是初始值，因为定时器异步任务，会先走console.log(suggestion)
// console.log(suggestion)
}
在搜索框输入，我们发现会在停止输入500ms后network发送请求
这里调用定时器window.clearTimeout，需要加window！我们在前面的帖子讲过，定时器可以在node和浏览器两个环境下执行，默认是node。如果这里我们不加window，ts会给我们代码报错
接下来我们使用aHooks库里面的防抖函数
aHooks官网 ahooks-next.surge.sh/hooks/use-d…
1、安装 ahooks 包：
npm i ahooks
2、导入 useDebounceFn hook
//useDebounceFn,Fn指的就是防抖函数，如果想实现其他的防抖，官网里也有
import { useDebounceFn } from 'ahooks'
3、创建防抖函数
//onChange就是我们上面的那个onChange函数，这个里面写需要做防抖的操作，也就是发请求
//{ wait: 500 }就是防抖触发的时间
//run就是经过useDebounceFn处理过后有了防抖功能的函数，我们使用的时候直接调用run，
就是等于调用onChange函数，不过是加上了防抖效果
const { run } = useDebounceFn(onChange, { wait: 500 })
4、搜索框中输入内容时，调用防抖函数
在搜索框的onChange事件里调用run函数就可以了，这个就是给原来函数加上防抖效果的新函数
<SearchBar onChange={run} placeholder="请输入关键字搜索" />
aHook官网里还有很多好用的工具函数，它和react的搭配是很完美的，值得我们学习
