Автоматическое закрытие Подтвердите окно после завершения setTimeout()

Question

login.service.ts:

setTimeout(()=>{  
           this._auth.refreshToken();
     }, 5000);

session.service.ts:

refreshToken(){
        var r = confirm("Your Session is going to Expire.Click 'OK' to Continue or Cancel to Logout");
            if (r == true) {
              return true;
            } else {
               this.logout();
               return false;
            }
      }

Как я могу закрыть всплывающее окно подтверждения после завершения интервала времени.

Answer 1

setTimeout события не обрабатываются, пока confirm диалог открыт. Это соответствует документации на WHATWG:

7. Пауза, пока пользователь не ответит ни положительно, ни отрицательно.

Эта же спецификация объясняет, что означает "пауза":

2. Подождите, пока цель условия не будет достигнута. Пока пользовательский агент имеет приостановленную задачу, соответствующий цикл событий не должен запускать дальнейшие задачи, и любой сценарий в текущей запущенной задаче должен блокироваться.

Таким образом, вам необходимо реализовать собственный неблокирующий механизм или использовать одну из множества библиотек, предлагающих такую ​​функцию.

Вот простая реализация без библиотеки, использующая механизм Promise:

function myConfirm(msg, timeout) {
    const inputs = [...document.querySelectorAll("input, textarea, select")].filter(input => !input.disabled);
    const modal = document.getElementById("modal");
    const elems = modal.children[0].children;
    
    function toggleModal(isModal) {
        for (const input of inputs) input.disabled = isModal;
        modal.style.display = isModal ? "block" : "none";
        elems[0].textContent = isModal ? msg : "";
    }

    return new Promise((resolve) => {
        toggleModal(true);
        elems[1].onclick = () => resolve(true);
        elems[2].onclick = resolve;
        setTimeout(resolve, timeout);            
    }).then(result => {
        toggleModal(false);
        return result;
    });
}

function refreshToken(){
    var r = myConfirm("Your session is about to expire. Click OK to continue or Cancel to log out. Defaulting to Cancel after 4 seconds...", 4000);
    return r.then(ok => {
        if (ok) {
            console.log("extending the session");
            // do whatever is needed to extend the session
        } else {
           console.log("logging out");
           //this.logout();
        }
        return ok;
    });
}

// Demo: let the popup appear after 1 second:
setTimeout(refreshToken, 1000);

#modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgb(0,0,0);
  background: rgba(0,0,0,0.4);
  font-family: "ms sans serif", arial, sans-serif;
}

#modal > div {
  position: fixed;
  padding: 10px;
  width: 280px;
  left: 50%;
  margin-left: -150px;
  top: 50%;
  margin-top: -50px;
  background: white;
  border: 2px outset;
}

<div id="modal">
    <div>
        <div></div><br>
        <button>OK</button>
        <button>Cancel</button>
    </div>
</div>

<p> This is a test page with a test input </p>
<input>

Так что вам нужно добавить CSS и <div id="modal"> элемент в вашем HTML. Затем вызовите функцию myConfirm с 2 аргументами:

• текст для отображения
• время ожидания в миллисекундах, по истечении которого пользователь будет нажимать кнопку Отмена

myConfirm Функция возвращает обещание, поэтому вы должны дождаться его разрешения, прежде чем сможете узнать ответ пользователя. Например, используйте then выполнить свой пользовательский код.