How to display popups with time delay in react.js? - reactjs

Question

I have three custom popups and I am able to display them one after another with time delay.
But there is one scenario I am not able to resolve.There are 3 popups -
1)Welcome Video Popup 2)Profile Popup 3) Custom Notification Popup
I have a custom notification popup modal and this comes at the last before the two popups.
Now I want if there is no WelcomeVideo Popup and Profile popup and user hasn't allow or blocked notifications, my custom Notification Popup should show.
My Custom popup will only show if state setNotificationPopup is true.
Here is the code --
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>
}
/>
)}
)
Note - The issue is if there is Profile Popup then my custom Notification Popup shows immediately after profile Popup and also after 5 sec.

Answer 1

Let's first understand how setTimeout works.
Javascript is a single-threaded language but not a browser. The browser is running three threads at a time: Js Engine, UI thread, and the timer thread. This timer thread actually controls the setTimeout.
Now when we are calling setTimeout, a timer thread starts the countdown, but our actual callback function does not come into execution before the other functions in the stack are not finished. So if there are other time-consuming functions being executed when time up, the callback of setTimeout will not finish in time.
Hence in your code also the code you wrote is correct the problem is with the use of setTimeout. Once we correct that our code will be executed as the way we want.
I hope this piece of information helped you.
For further understanding the concept of setTimeout please refer to the following link :-
https://www.javascripttutorial.net/javascript-bom/javascript-settimeout/

Answer 2

Maybe you should refactor you code as below.
there should be an array that contains all pop-ups that should be shown, in order.
Once this array is defined, your component will iterate through the array, showing popups.
Below is example
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);
}
},[])
}