Блог

Главная - Вопросы по программированию - Автоматическое закрытие окна подтверждения после завершения setTimeout()

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

#javascript

#javascript

Вопрос:

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;
            }
      }

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

Комментарии:

1. Вы не можете программно закрыть собственное модальное диалоговое окно; это требует взаимодействия с пользователем.

2. Вы не можете закрыть подтверждение…. Вам придется разработать свой собственный.

3. Используйте модальный подход вместо подтверждения, он выглядит лучше с правильным css, и вы будете контролировать его с помощью JS.

Ответ №1:

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

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

Та же спецификация объясняет, что означает «Пауза»:

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

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

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

 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 resu<
    });
}

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 для выполнения вашего пользовательского кода.