Question

我有三个自定义弹出窗口，我可以一个接一个地显示它们，但有时间延迟。

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

1)欢迎视频弹出窗口 2)个人资料弹出窗口 3)自定义通知弹出窗口

我有一个自定义通知弹出模式，它出现在两个弹出窗口之前的最后一个。

现在我想要如果没有欢迎视频弹出窗口和个人资料弹出窗口并且用户没有允许或阻止通知，我的自定义通知弹出窗口应该显示。

我的自定义弹出窗口仅在状态 setNotificationPopup 为真时才会显示。

这是代码--

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

也许你应该重构你的代码如下。

应该有一个数组，其中包含所有应该显示的弹出窗口，按顺序排列。定义此数组后，您的组件将遍历该数组，并显示弹出窗口。

下面是例子

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);
        }
    },[])
    
}

Answer 2

让我们首先了解 setTimeout 是如何工作的。 Javascript 是一种单线程语言，但不是浏览器。浏览器同时运行三个线程：Js Engine、UI 线程和计时器线程。这个定时器线程实际上控制了setTimeout。现在，当我们调用 setTimeout 时，一个计时器线程开始倒计时，但是在堆栈中的其他函数未完成之前，我们的实际回调函数并未开始执行。所以如果time up时还有其他耗时的函数在执行，setTimeout的回调就不会及时完成。

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

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

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

2 个答案: