react中点击按钮，使用节流函数

react中使用节流函数：

今天开发中遇到一个节流的问题，印象中都是使用setTimeout，将需要节流的方法写在其中。

---

问题：需要调三次接口，并且上一个接口成功才可以执行下一个。设置的按钮在调接口没有结束前不可以点击。setDisabled并没有生效，

原因分析： 个人浅见（不一定正确）

这是因为React在同步的情况下是异步的，setDisabled最后还是false没有改变 ，要使useState是同步的，就要在外加个定时器。看到之前同事加的sleep函数，应该是sleep函数是微任务，js的执行顺序是先执行微任务再执行宏任务，所以settimeOut执行结束后，再执行了useState这样生效了。

	function sleep(times) {
 	 return new Promise(resolve => {
	    setTimeout(resolve, times);
	  });
	}

  const okHandle = useCallback(async () => {
    let errMsg = await formRef.current.validate();
    if (errMsg) {
      message.toast(errMsg);
    } else {
      setDisabled(true);
      await sleep(3000);
      if (form.relationType == 1) {
       xxx
      } else {
        saveData(form);
      }
      setDisabled(false);
    }
  }, [form]);
  
        <Button onClick={okHandle} type="bottom" disabled={disabled}>
          确定
        </Button>

---

使用lodash解决：

lodash提供了一些很好用的方法， _.throttle是防抖节流函数，具体用法可以参考官网

      <Button onClick={_.throttle(okl,2000)} >
        测试节流  
      </Button>