Question

我的简单逻辑是，我每隔一定时间后打开一个j-query弹出窗口（要求用户他/她的会话时间将在60秒内到期）。此弹出窗口上有两个按钮继续，如果用户点击继续，ajax请求会将会话时间增加一段时间，或者用户可以选择注销按钮或用户将在60秒后通过ajax自动呼叫自动重定向到注销。

问题是 - ：在该弹出窗口上有一个60秒的计时器，当我点击继续按钮时，弹出窗口会关闭，并在弹出窗口后再次弹出在setInterval方法中设置的时间，但是计时器以第二次计数开始，其中点击了之前的计数（假设它被点击了47秒，它应该从60开始，但它从47开始），我可以不是我缺乏的地方。这是我的代码

var timeExpire=60000; // a global variable for pop up
            var interval="";
            var counter=60;

          setInterval(function () {  // This setInterval opens up the pop after every 60 seconds.
                $("#dialog").dialog({    //dialog to be opened
                    modal: true,
                    autoOpen: false,
                    title: "Session Dialog",
                    width: 300,
                    height: 250,
                    closeOnEscape: false,
                    open: function(event, ui) { //just to hide the close button from popup
                        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
                          }
                      });
                      if($('#dialog').dialog('open')){
                           interval = setInterval(function() { //another setInterval to start the timer on pop up,
                            counter--;
                            if(counter < 0) {
                                clearInterval(interval);      //Clear the interval.
                                $('#dialog').dialog('close'); //unload Popup Box.
                            } else {
                                $("span#timer").text(counter.toString());  //Show timer of 60 seconds on PopUp Box.
                            }
                         }, 1000);
                      }
                  }, 30000);

这是我正在更新会话的ajax代码，我在这里调用clearInterval(interval)函数来清除setInterval（用于弹出窗口上的计时器）。 Ajax代码：

function loginagain(){
       clearInterval(interval); // Wants to clear the time interval and popup timer should start with the start. 
        $.ajax({
            url:'loginagain.php',
            type:'post',
            success:function(response){
                if((response.length)>1){ 
                    $('#dialog').dialog('close');
                    timeExpire=response;
                      }
                  }
             });
        }

我在这里知道的人可能会在这个问题上犯很多错误，我只是请求，建议更好，并解决我的问题。提前欣赏。

这是pop html代码

<!--Open a dialog after every 10 minutes asking agent to login again..(starts here)-->
<div id="dialog" style="display: none" align = "center">

    <span id="timer"></span>
   Your session is going to expire within 60 seconds. If you want to continue click on <button id="loginAgain" class="btn btn-default" onclick="loginagain();" >Continue</button>
   <br><br> or<br><br> If you want to logged Out click on <a class="btn btn-default" href="logout.php">logout</a>
</div>
<!--Ends here-->

Answer 1

我认为您在调用clearInterval

后也需要重置计数器值

clearInterval(interval);
counter=60;

Answer 2

@ SanthoshNayak的回答是正确的。我不接受我对他的“回答”，我只是在这里添加，因为我觉得它很有帮助

IMO通过利用JQuery UI对话框中的事件，您可以更轻松地跟踪和调试此代码。

var timeExpire=60000; // a global variable for pop up
var interval; // interval to time the dialog


var spanInterval; // interval to update text in dialog
var $dialog = $("#dialog"); // cache dialog selector
var $timerSpan = $("#timer"); // cache timer selector

var counter = 60;


// initialize dialog with options 

$dialog.dialog({    //dialog to be opened
    modal: true,
    autoOpen: false,
    title: "Session Dialog",
    width: 300,
    height: 250,
    closeOnEscape: false,
    open: function(event, ui) { 
      // hide close button      
      $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
      //set correct time in dialog
      $timerSpan.text(counter.toString());
      // start the function that takes care of updating dialog counter
      spanInterval = setInterval(updateDialogTime, 1000);  
    },
    close: function(event,ui){
       // stop the function that takes care of updating dialog counter
        clearInterval(spanInterval);
      // reset the counter time 
        counter = 60; 
    }
  });    

// takes care of updating dialog span text
function updateDialogTime(){
    if($dialog.dialog('isOpen')) {
      counter--;
      $timerSpan.text(counter.toString());

      if(counter < 0) {        
        $dialog.dialog('close'); //unload Popup Box.
      } 
  }  
}

// wrap dialog open call in function so setInterval can use it 
function showDialog(){
  $dialog.dialog('open');
}

// show after 5 seconds for testing
interval = setInterval(showDialog, 3000);



function loginagain(){
 clearInterval(interval);    

  // fake an ajax response response for testing
  // remove in production code  
  $('#dialog').dialog('close');
  // reopen in 10 seconds to ensure (for testing)  
  timeExpire=10000;
  interval = setInterval(showDialog, timeExpire);  

/*  
        $.ajax({
            url:'loginagain.php',
            type:'post',
            success:function(response){
                if((response.length)>1){ 
                    $('#dialog').dialog('close');
                    timeExpire=response;
                   interval = setInterval(showDialog, timeExpire);
                      }

              }
         });
*/
  }

ClearInterval（）在以下代码逻辑中无法正常工作

2 个答案: