[react] hooks中debounce的使用

昨天在代码的调试过程中，发现有一个文本框在输入内容的时候每输入一个字母都自动调用一次接口，这时我想到了使用防抖函数，我们在短时间内输入文本的时候，则只会在最后一次延迟结束的时候进行接口调用。

防抖的原理比较简单，就是使用闭包保存住计时器 timer 和 传递的函数，然后每次进入时都把之前的 timer 清空掉，这样延时 wait 每次都会重新开始计算，以此来达到只在延时结束后执行一次的效果。

用法很简单，我们只要加上debounce函数即可：

import _ from "lodash";

const debounce = _.debounce;

useEffect(()=>{
    const value = 0
    handleValuesChange(values);
}, [watchAll]);

const handleValuesChange = useCallback(_.debounce((values)=>{
    console.log(values)
    // 接口调用
},1000),[]);