在jQuery中，计数器不会在对话框窗口中单击按钮时重置

Question

我写了一个小脚本，将显示一个jQuery对话框窗口在这么多秒的空闲时间在同一个页面上。一旦这个对话框打开，我就从对话框打开的时间开始倒计时30秒。如果用户在30秒内没有点击"是，继续工作"按钮，那么脚本将通过简单地将用户转移到注销页面自动注销用户。

脚本几乎工作没有问题。但是，当同一对话框在同一页面上第二次出现时，30秒倒计时不像预期的那样工作。(即。用户达到超时值2次(同一屏幕"没有任何刷新")

的目的是在30秒开始，然后每秒减少1的值。此外，当用户单击"是，继续工作"时，该计数器应重新测试到起始点30。

问题:

在用户点击"是，继续工作"按钮后，脚本无法将计数器重置为30。

有人能告诉我为什么脚本不重置计数器，即使它应该重置一个函数startTimeoutCounter()被调用。startTimeoutCounter()函数在每次页面加载完成时调用，也在点击"Tes, Keep Working"时调用。

这是我的JS代码

 <script type="text/javascript">
    var timer;
    var closeDialogAfter = 30;  //The default counter value
    var idleTimeOutLimit = 5; //Display the dialog after @idleTimeOutLimit seconds of idle time
    var signOutScript = 'login.php?action=logout';   //logout url
    var keepAliveScript = 'ajax/handler-keep-me-alive.php';  //php page to handle ajax request to keep the session alive
    var dialogCountdown = '#dialog-countdown';  // the lable that is used to display the counter
    var idleTimeout= '#idleTimeout';  //the div that is used for the dialog 
    $(function($){
        //start the idle time out counter
        startTimeoutCounter();
        $( idleTimeout ).dialog({
            resizable: false,
            autoOpen: false,
            width: 400,
            open: function(){
                updateTimeoutCounter();
            },
            buttons: {
                "Yes, Keep working": function(e) {
                    $.ajax({    
                        url: keepAliveScript,       
                        success: function() {
                            startTimeoutCounter();
                            $( idleTimeout ).dialog("close");
                        }
                    });
                },
                "No, End Session": function(e){
                    forceLogOut();
                    $(this).dialog('close');                
                }
            }
        }); 
    });

    function startTimeoutCounter(){
        timer = closeDialogAfter;
        $(dialogCountdown).text(timer);
        setTimeout(function(){
            $( idleTimeout ).dialog("open");
        }, idleTimeOutLimit * 1000);
    }
    function updateTimeoutCounter(){
        console.log($(dialogCountdown).text());
        setTimeout(function(){
            timer = timer -1;
            $(dialogCountdown).text(timer);
            (timer < 2) ? forceLogOut() :   updateTimeoutCounter();
        }, 1000);
    }   
    function forceLogOut(){
        window.location = signOutScript;
    }
</script>

这段代码是我识别html部分的地方

<div id="idleTimeout" title="Your session is about to expire!" class="box-hidden">
        You will be logged off in <strong><span id="dialog-countdown"></span></strong> seconds.
    <p>Do you want to continue your session?</p>
</div>

Answer 1

启动新计时器时需要终止旧计时器

var timer; //in global scope
 function startTimeoutCounter(cnt, limit, label, idleTimeout){
    $(label).text(cnt);
    'undefined' !== typeof timer &&  clearTimeout(timer); 
    timer = setTimeout(function(){
        $( idleTimeout ).dialog("open");
    }, limit * 1000);
}

Answer 2

我终于修好了，我将updateTimeoutCounter函数更改为以下

function updateTimeoutCounter(){
    if(  $( idleTimeout ).dialog( "isOpen" )){
        setTimeout(function(){
            timer = timer -1;
            $(dialogCountdown).text(timer);
            (timer < 2) ? forceLogOut() :   updateTimeoutCounter();
        }, 1000);
    } else 
        $(dialogCountdown).text(closeDialogAfter)
}

这是我的最终代码，如果有人喜欢使用它

<script type="text/javascript">
    var timer;
    var closeDialogAfter = 30;  //The default counter value
    var idleTimeOutLimit = 5; //Display the dialog after @idleTimeOutLimit seconds of idle time
    var signOutScript = 'login.php?action=logout';   //logout url
    var keepAliveScript = 'ajax/handler-keep-me-alive.php';  //php page to handle ajax request to keep the session alive
    var dialogCountdown = '#dialog-countdown';  // the lable that is used to display the counter
    var idleTimeout= '#idleTimeout';  //the div that is used for the dialog 
    $(function($){
        //start the idle time out counter
        startTimeoutCounter();
        $( idleTimeout ).dialog({
            resizable: false,
            autoOpen: false,
            width: 400,
            open: function(){
                updateTimeoutCounter();
            },
            buttons: {
                "Yes, Keep working": function(e) {
                    $.ajax({    
                        url: keepAliveScript,       
                        success: function() {
                            startTimeoutCounter();
                            $( idleTimeout ).dialog("close");
                        }
                    });
                },
                "No, End Session": function(e){
                    forceLogOut();
                    $(this).dialog('close');                
                }
            }
        }); 
    });

    function startTimeoutCounter(){
        timer = closeDialogAfter;
        $(dialogCountdown).text(timer);
        setTimeout(function(){
            $( idleTimeout ).dialog("open");
        }, idleTimeOutLimit * 1000);
    }
    function updateTimeoutCounter(){
        if(  $( idleTimeout ).dialog( "isOpen" )){
            setTimeout(function(){
                timer = timer -1;
                $(dialogCountdown).text(timer);
                (timer < 2) ? forceLogOut() :   updateTimeoutCounter();
            }, 1000);
        } else 
            $(dialogCountdown).text(closeDialogAfter)
    }   
    function forceLogOut(){
        window.location = signOutScript;
    }
</script>