react 防抖和节流

定义：

• 节流: 一段时间内只运行一次，若在这段时间内重复触发，只有第一次生效

• 防抖: 一段时间后在执行该事件，若在这段时间内被重复触发，则重新计时

节流一般用在按钮上，防抖一般用在搜索上

节流：

// 这个是点第一次的时候立即生效，接下来在一定时间内再点就不生效了，直到这段时间过去
function throttle (fn, delay) {
    let flag = true;
    return function () {
        if(flag){
            flag = false;
            fn();
            setTimeout(() => {
                flag = true;
            }, delay);   
        }    
    }
}

// 这个是点第一次的时候不生效，直到这段时间过去无论点了多少次只有一次生效
function throttle (fn, delay) {
    let flag = true;
    return function () {
        if(flag){
            flag = false; // 这个放在上面还是下面应该都可以
            setTimeout(() => {
                fn();
                flag = true;
            }, delay);   
        }    
    }
}

防抖：

// 一段时间后执行某段代码，如果在这段时间之内再次点击了，会清除当前的定时器，重新开一个定时器
// 直到时间结束这段代码被执行，不然会一直重复这个过程，这段代码一直不会被执行
function debounce(fn, delay){
    let timer = null;
    return function(){
        clearTimeout(timer);
        timer = setTimeout(()=> {
            fn();
        }, delay)
    }
}

react封装好的防抖和节流

第三方函数工具库：lodash

安装：npm i lodash

引入：import _ from 'lodash'

// 防抖  反复触发执行最后一次 //使用useCallback防止debounce失效
  const debounce = _.debounce;
  const getSuggestion = useCallback(
    debounce((val: string, type: boolean) => {
      type ? message.success(val) : message.warning(val);
    }, 300),
    [],
);

// 节流
const throttle = _.throttle;
const getSuggestion = 
throttle((val: string, type: boolean) => {
    type ? message.success(val) : message.warning(val);
}, 300);

如有问题欢迎讨论指正~