Javascript 我如何使用debounce对句柄进行debounce

我试图创建一个按钮撤销，当用户点击邀请按钮邀请另一个用户加入团队时，该邀请将花费10秒，然后将邀请发送给该用户，同时使撤销按钮出现，用户可以在10秒内撤销邀请

在这种情况下，如何使用useDebounce

以下是我的代码：

import { useDebounce } from "use-debounce";

const InviteCard = (props) => {
  const {
    user,
    tab,
    teamId,
    privateTeamId,
    onSubmiteInvitee,
    isInvitationAvailable,
    searchQuery,
    invite,
  } = props;

  async function inviteToTeam(e) {
    if (!user.verifiedDT) {
      notify("User has not verified their identity, can not invite.");
    } else {
      const res = await axios.post("/api/v1/invites/invite", {
        userToInvite: user.public_user_id,
        teamId: teamId,
      });
      if (res.data.inviteWasCreated === false) {
        notify("User has already been invited.");
      } else if (res.data.error !== undefined) {
        notify(res.data.error);
      } else if (res.data.msg) {
        if (res.data.msg === "max members") {
          toggleRequestModal();
          setLimitType("team members");
        }
        if (res.data.msg === "max invites") {
          toggleRequestModal();
          setLimitType("invites");
        }
      } else {
        notify("Invite sent.");
        setWhatToReload("invite data");
        onSubmiteInvitee(e);
      }
    }
  }

  const handleSubmitInvite = (e) => {
    e.preventDefault();
    inviteToTeam(e);
  };

  let debounceInvite = useDebounce(inviteToTeam, 500);

  useEffect(() => {

  }, [debounceInvite]);

  return (
    <div ref={domNode}>
            <form onSubmit={handleSubmitInvite}>
              <button type="submit" className="invitees-invite-button">
                Invite
              </button>
            </form>
          </div>
  );
};

export default InviteCard;

从“use debounce”导入{useDebounce}；
康斯特邀请卡=（道具）=>{
常数{
用户，
标签，
teamId，
privateTeamId，
被邀请者，
可获得的信息，
搜索查询，
邀请，
}=道具；
异步函数（e）{
如果（！user.verifiedDT）{
通知（“用户未验证其身份，无法邀请”）；
}否则{
const res=wait axios.post（“/api/v1/invests/invite”{
userToInvite:user.public\u user\u id，
teamId:teamId，
});
if（res.data.inviteWasCreated===false）{
通知（“用户已被邀请”）；
}else if（res.data.error！==未定义）{
通知（res.data.error）；
}else if（res.data.msg）{
如果（res.data.msg==“最大成员数”）{
toggleRequestModal（）；
setLimitType（“团队成员”）；
}
如果（res.data.msg==“最大邀请”）{
toggleRequestModal（）；
setLimitType（“邀请”）；
}
}否则{
通知（“邀请已发送”）；
setWhatToReload（“邀请数据”）；
被申请人（e）；
}
}
}
const handleSubmitInvite=（e）=>{
e、 预防默认值（）；
图腾（e）；
};
让debounceInvite=使用Debounce（500）；
useffect（（）=>{
}，[debounceInvite]）；
返回(
邀请
);
};
导出默认信用卡；

更新。添加新功能：

  const [sent, setSent] = useState(false);
  const [timeoutId, setTimeoutId] = useState();
  const handleSubmitInvite = (e) => {
    e.preventDefault();
    // call "inviteToTeam" function after 10s
    const id = setTimeout(() => {
      inviteToTeam(e);
    }, 10 * 1000);

    setSent(!sent);
    // save the timer id in the state
    setTimeoutId(id);
  };

  const onUndoClick = (timeoutId) => {
    // get the timeout id from the state
    // and cancel the timeout
    setSent(false);
    clearTimeout(timeoutId);
  };

        {!sent &&
          !isInvitationAvailable(privateTeamId, user.InvitesApplications) && (
            <div>
              <form onSubmit={handleSubmitInvite}>
                <button type="submit" className="invitees-invite-button">
                  Invite
                </button>
              </form>
            </div>
          )}
        {sent && <button onClick={onUndoClick}>Undo</button>}

const[sent，setSent]=useState（false）；
const[timeoutId，setTimeoutId]=useState（）；
const handleSubmitInvite=（e）=>{
e、 预防默认值（）；
//10秒后调用“inviteToTeam”功能
const id=setTimeout（（）=>{
图腾（e）；
}, 10 * 1000);
设置设置项（！已发送）；
//将计时器id保存在状态中
setTimeoutId（id）；
};
const onUndoClick=（timeoutId）=>{
//从状态获取超时id
//然后取消超时
setSent（假）；
clearTimeout（timeoutId）；
};
{！发送&&
！isInvitationAvailable（privateTeamId、用户邀请应用程序）和(
邀请
)}
{已发送（&Undo}

在这种情况下，不需要去盎司

您可以使用具有10秒延迟的

setTimeout

来延迟调用

inviteToTeam

函数，如果用户在调用

inviteToTeam

函数之前单击“撤消”按钮，您可以使用

clearTimeout（）

函数取消超时

const handleSubmitInvite = (e) => {
   e.preventDefault();
   
   // call "inviteToTeam" function after 10s
   const id = setTimeout(() => {
     inviteToTeam(e);
   }, 10 * 1000);

   // save the timer id in the state
   setTimeoutId(id);
};

如果单击“撤消”按钮，则取消超时

const onUndoClick = () => {
   // get the timeout id from the state
   // and cancel the timeout
   clearTimeout(timeoutId);
};

要保存超时id，需要为其创建状态

const [timeoutId, setTimeoutId] = useState(null);

---

我必须创建[timeOutId，setTimeOutId]对吗？我刚刚在我的问题下面添加了我的新代码。你能帮我看一下吗？谢谢，阿洛蒂特工作。非常感谢你！你知道我可以在und按钮中显示超时倒计时吗？你需要

setInterval

来显示超时倒计时，并且

counter

状态在10开始计数器，并且

setInterval

每秒递减计数器状态。比如为其创建一个新状态并添加到

handlesubmitInvitee

？