Javascript PrimeFaces confirmDialog中的倒计时计时器

在我的web应用程序中，我有一个空闲监视器，如果用户空闲5分钟，它就会被触发。将打开确认对话框，等待2分钟；之后，它将重定向到登录页面

要求：我想显示一个倒计时计时器，在用户被重定向到登录页面之前剩余的时间

baseTemplate.xhtml：

<h:form>

    <p:idleMonitor timeout="#{idleMonitorView.timeoutVal}"
        onidle="startTimer()" />

    <p:confirmDialog id="confirmDialog"
        message="You have been idle, Please click ok to remain logged in"
        header="Are you there?" severity="alert" widgetVar="idleDialog">                 
        <p:commandButton id="confirm" value="Ok" oncomplete="extendSession()" />

    </p:confirmDialog>

    <p:remoteCommand name="terminateIdleSession" actionListener="#{idleMonitorView.onIdle}" out="count" />

    <script type="text/javascript">
        var extend_session = 0;
        function startTimer() {

            extend_session = 0;
            setTimeout("timeout()", 120000);
            PF('idleDialog').show();
        }

        function timeout() {
            if (extend_session == 0) {
                terminateIdleSession();
            }
        }

        function extendSession() {
            extend_session = 1;
            PF('idleDialog').hide();
        }
    </script>
</h:form>

var extend_session=0；
函数startTimer（）{
扩展会话=0；
setTimeout（“timeout（）”，120000）；
PF（'idleDialog'）.show（）；
}
函数超时（）{
如果（扩展会话==0）{
终止会话（）；
}
}
函数扩展会话（）{
扩展会话=1；
PF（'idleDialog'）.hide（）；
}

---

问题：我不知道如何实现这一要求。

您应该创建一个JavaScript间隔，每秒更新一次计时器（或您需要的任何其他间隔）。您可以使用一点jQuery更新计时器。我建议在对话框消息中添加一个跨度，您可以将其用作计时器：

$("#myForm\\:confirmDialog .ui-confirm-dialog-message").append("<span id=logoffTimeout/>");

我建议您在按钮和远程命令上使用

process=“@this”

。另见：

您应该知道的是，在JavaScript中启动超时时，会返回一个ID。您可以使用该ID清除超时

我最终得到了这个XHTML：

这个JavaScript：

function startTimer() {
  clearTimeout(window.logoffUpdaterId);
  PF('idleDialog').show();
  // Set timeout to 2 minutes
  var timeout = 2 * 60 * 1000;
  // Calculate when the time runs out
  window.logoffTime = new Date().getTime() + timeout;
  // Start timer which calls remote command
  window.logoffTimeoutId = setTimeout(terminateIdleSession, timeout);
  // Update timer every second
  window.logoffUpdaterId = setInterval(updateTimer, 1000);
  // Update timer now
  updateTimer();
}

// Update the timer
function updateTimer() {
  var seconds = Math.ceil((window.logoffTime - new Date().getTime()) / 1000);
  $("#logoffTimeout").html(seconds);
}

// Create span to contain the timer
$(function(){
  $("#myForm\\:confirmDialog .ui-confirm-dialog-message").append("<span id=logoffTimeout/>");
});

---

我建议从文件/资源中加载脚本，这将为您提供缓存的好处。

我收到此错误“与元素类型“span”关联的属性“id”需要打开引号”。对话框也不会出现。但当我删除函数“创建包含计时器的跨度”时，对话框会出现，但没有计时器。@Narendra我已经更新了答案。请将CDATA添加到脚本中。我有一个问题，单击“确定”按钮后，超时未被重置。到5分钟。说明：假设我空闲5分钟，然后对话框出现等待2分钟，如果我在50秒后单击“确定”按钮，对话框将被隐藏，但在（120-50=70）秒后，它将自动重定向到登录页面（无任何确认对话框）。似乎不是将timeoutVal重置为5分钟。它的keep timeoutVal=2分钟很糟糕<代码>注销超时ID应已清除。看更新。现在它是完美的。

function startTimer() {
  clearTimeout(window.logoffUpdaterId);
  PF('idleDialog').show();
  // Set timeout to 2 minutes
  var timeout = 2 * 60 * 1000;
  // Calculate when the time runs out
  window.logoffTime = new Date().getTime() + timeout;
  // Start timer which calls remote command
  window.logoffTimeoutId = setTimeout(terminateIdleSession, timeout);
  // Update timer every second
  window.logoffUpdaterId = setInterval(updateTimer, 1000);
  // Update timer now
  updateTimer();
}

// Update the timer
function updateTimer() {
  var seconds = Math.ceil((window.logoffTime - new Date().getTime()) / 1000);
  $("#logoffTimeout").html(seconds);
}

// Create span to contain the timer
$(function(){
  $("#myForm\\:confirmDialog .ui-confirm-dialog-message").append("<span id=logoffTimeout/>");
});

<script type="text/javascript">
//<![CDATA[
...
//]]>
</script>