ClearInterval() не работает должным образом в следующей логике кода

Question

Моя простая логика: у меня есть всплывающее окно j-query, которое должно быть открыто через определенное время (чтобы спросить пользователя о том, что его время сеанса истечет в течение 60 секунд). И есть 2 кнопки на этом всплывающем окне до . Продолжайте, если пользователь нажимает кнопку «Продолжить», запрос 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); 

А вот Аякс код, с помощью которого я обновление сессии, и я назвал функцию 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; 
         } 
        } 
      }); 
     } 

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

Вот поп-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); 
         } 

       } 
     }); 
*/ 
    }