如何在react.js中显示具有时间延迟的弹出窗口

Question

我有三个自定义弹出窗口，我可以延迟显示它们。

但有一种情况我无法解决。有3个弹出窗口-

1( 欢迎视频弹出菜单2(配置文件弹出菜单3(自定义通知弹出菜单

我有一个自定义的通知弹出模式，这是在两个弹出之前的最后一个。

现在我想，如果没有WelcomeVideo弹出窗口和Profile弹出窗口，并且用户不允许或阻止通知，我的自定义通知弹出窗口应该显示。

只有当状态setNotificationPopup为true时，我的自定义弹出窗口才会显示。

这是代码--

const handleCloseWelcomeMessagePopup = () => {
const firstTimeCheckIn = localStorage.getItem('firstTimeCheckIn');
if (firstTimeCheckIn !== 'true' && isShowWelcomeMessage) {
setTimeout(() => {
setNotificationPopup(true);
}, 5000);
}
};
const handleCloseProfilePopup = () => {
setTimeout(() => {
setNotificationPopup(true);
}, 5000);
setShowProfilePopup(false);
};
useEffect(() => {
const firstTimeCheckIn = localStorage.getItem('firstTimeCheckIn');
if (isAuthenticated && !isShowWelcomeMessage && isShowProfilePopup === false) {
if (firstTimeCheckIn !== null && firstTimeCheckIn !== true) {
setNotificationPopup(true);
}
}
}, []);
return (
{(welcomeMessage || welcomeMessageVideo) && (
<PopupModal
id="welcome-message"
headerText={
welcomeMessage && (
<p
className="fr-view welcome-header-text"
dangerouslySetInnerHTML={{
__html: welcomeMessage,
}}
/>
)
}
showModal={isShowWelcomeMessage}
onCloseFunc={() => {
handleCloseWelcomeMessagePopup();
}}
>
)}
{isShowProfilePopup && (
<PopupModal id="profile-popup" showModal={isShowProfilePopup} onCloseFunc={() => handleCloseProfilePopup()}>
<div>{<ProfileDetails params={params} isFirstTime hideProfilePopup={handleCloseProfilePopup} />}</div>
</PopupModal>
)}
{window?.Notification?.permission === 'default' && (
<PopupModal
id="otpPopup"
custClassName={'notification-popup'}
showModal={notificationPopup}
headerText={
<>
<div className="d-flex">
<Image
className=
'img-responsive notification-logo',
src={`${IMAGE_URL}${popupImage}`}
/>
<div>
<p className="notification-title">Test !</p>
<p className="notification-body">{`Allow notifications so you don't miss announcement or direct messages!`}</p>
</div>
</div>
</>
}
backdrop="static"
modelFooter={
<div className="notification-footer">
<Button className="btn btn-link" variant="secondary" onClick={closeNotification}>
Close
</Button>
<Button className="btn btn-primary" onClick={askNotificationPermission}>
Allow
</Button>
</div>
}
/>
)}
)

注意-问题是，如果有配置文件弹出，那么我的自定义通知弹出会在配置文件弹出后立即显示，也会在5秒后显示。

Answer 1

让我们首先了解setTimeout是如何工作的。Javascript是一种单线程语言，但不是浏览器。浏览器一次运行三个线程：Js引擎、UI线程和计时器线程。这个定时器线程实际上控制着setTimeout。现在，当我们调用setTimeout时，一个定时器线程开始倒计时，但在堆栈中的其他函数尚未完成之前，我们实际的回调函数不会执行。因此，如果时间到了，还有其他耗时的函数正在执行，那么setTimeout的回调将无法及时完成。

因此，在您的代码中，您编写的代码也是正确的——问题在于使用setTimeout。一旦我们纠正，我们的代码将按照我们想要的方式执行。

我希望这条信息对你有帮助。要进一步了解setTimeout的概念，请参阅以下链接：-https://www.javascripttutorial.net/javascript-bom/javascript-settimeout/

Answer 2

也许您应该按照以下方式重构代码。

应该有一个数组，按顺序包含所有应该显示的弹出窗口。一旦定义了这个数组，您的组件就会遍历这个数组，显示弹出窗口。

以下是示例

export const SomeComponent =(showPopup1,showPopup2,showPopup3)=> {
const popupsToShow = []
showPupup1 && popupsToShow.append(1)
showPupup2 && popupsToShow.append(2)
showPupup3 && popupsToShow.append(3)

useEffect(()=>{
for (i,e in popupsToShow){
setTimeout(() => {
showPopup(e)
}, i * 1000);
}
},[])

}