react使用节流函数防止重复点击问题

import * as _ from 'lodash';
_.throttle(()=>{
	console.log("throttle");
}, 100);
_.debounce(()=> {
  console.log("debounce");
}, 2000

// 这个是点第一次的时候立即生效，接下来在一定时间内再点就不生效了，直到这段时间过去
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)
    }
}

// 防抖  反复触发执行最后一次 //使用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);