javascript - 如何使用 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;
更新。添加新功能:
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>}
解决方案
在这种情况下,您不需要去抖动。
您可以使用setTimeout
10 秒延迟来延迟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);
推荐阅读
- node.js - 在JS文件nodejs中导入TS文件找不到模块
- mysql - 将两列的mysql数值group_concat与连接进行比较
- sql-server - 只有在所有表都更新后才需要显示更新的数据
- javascript - 如何使用移动应用程序的相机检测图像到文本
- reactjs - ReactJS:从数据列表中获取 ID
- vue.js - Vuex 不提供名为“createStore”的导出
- google-apps-script - 谷歌阻止了谷歌电子表格插件
- information-retrieval - 在密集检索场景中利用术语权重
- python - 在 python 中处理 selenium 异常和 alertbox
- npm - 如何更新 node_modules 中的包