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事件。这符合文档at WHATWG：

暂停直到用户做出正面或负面的反应。

相同的规范explains what "Pause" means：

等待直到达到条件目标。当用户代理具有暂停的任务时，相应的事件循环不得运行其他任务，并且当前正在运行的任务中的任何脚本都必须阻止。

因此，您将需要实现自己的非阻塞机制，或者使用提供这种功能的众多库之一。

这是一个没有库的简单实现，它使用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>

因此，您需要在HTML中添加CSS和<div id="modal">元素。然后使用两个参数调用函数myConfirm：

要显示的文字
超时（以毫秒为单位），在该超时后，用户将单击“取消”。

myConfirm函数返回一个诺言，因此您必须等待其解决，然后才能知道并处理用户响应。例如，使用then执行您的自定义代码。

setTimeout（）完成后，自动关闭确认框

1 个答案: