Php ClearInterval（）在以下代码逻辑中工作不正常

我的简单逻辑是，我有一个j-query弹出窗口，在每次特定时间后打开（询问用户会话时间将在60秒内到期）。该弹出窗口上有两个按钮，用于继续，如果用户单击继续，ajax请求会在一定时间内增加会话时间，或者用户可以选择注销按钮，或者用户将在60秒后通过ajax自动调用重定向到注销

问题是-：在该弹出窗口上有一个60秒的计时器，当我单击继续按钮时，弹出窗口会熄灭，并在

设置间隔

方法中设置的时间后再次弹出，但计时器从第二次计数开始，在之前的计数中单击它（假设，它被点击了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);

伙计们，我知道在这个问题上可能会有很多错误，我只是请求你们，提出更好的建议，解决我的问题。 提前欣赏

下面是弹出的

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-->

您的会话将在60秒内过期。如果要继续，请单击“继续”


或者

如果您想注销，请单击

我认为在调用clearInterval后，您也需要重置计数器值

clearInterval(interval);
counter=60;

---

@SanthoshNayak的回答是正确的。我不会接受我的“回答”，我只是在这里加上这个，因为我认为这很有帮助

IMO通过利用jQueryUI对话框中附带的事件，可以使代码更易于理解和调试

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);
                      }

              }
         });
*/
  }

var timeExpire=60000；//弹出窗口的全局变量
var interval；//为对话框计时的时间间隔
var spanInterval；//更新对话框中文本的间隔
var$dialog=$（“#dialog”）；//缓存对话框选择器
var$timerSpan=$（“#计时器”）；//缓存计时器选择器
var计数器=60；
//使用选项初始化对话框
$dialog.dialog（{//要打开的对话框
莫代尔：是的，
自动打开：错误，
标题：“会话对话框”，
宽度：300，
身高：250，
closeOnEscape：错误，
打开：函数（事件，ui）{
//隐藏关闭按钮
$（“.ui对话框标题栏关闭”，ui.dialog | ui.hide（）；
//在对话框中设置正确的时间
$timerSpan.text（counter.toString（））；
//启动负责更新对话框计数器的函数
spanInterval=setInterval（updateDialogTime，1000）；
},
关闭：功能（事件、用户界面）{
//停止负责更新对话框计数器的函数
净空间隔（spanInterval）；
//重置计数器时间
计数器=60；
}
});    
//负责更新对话框范围文本
函数updateDialogTime（）{
如果（$dialog.dialog（'isOpen'））{
计数器--；
$timerSpan.text（counter.toString（））；
如果（计数器<0）{
$dialog.dialog（'close'）；//卸载弹出框。
} 
}  
}
//包装对话框打开函数中的调用，以便setInterval可以使用它
函数showDialog（）{
$dialog.dialog（'open'）；
}
//测试5秒后显示
间隔=设置间隔（showDialog，3000）；
函数loginagain（）{
间隔时间；
//为测试伪造ajax响应
//在生产代码中删除
$（'dialog'）。dialog（'close'）；
//10秒钟后重新打开以确保（用于测试）
timeExpire=10000；
间隔=设置间隔（showDialog，timeExpire）；
/*  
$.ajax({
url:'loginagain.php'，
类型：'post'，
成功：功能（响应）{
如果（（响应长度）>1）{
$（'dialog'）。dialog（'close'）；
timeExpire=响应；
间隔=设置间隔（showDialog，timeExpire）；
}
}
});
*/
}

Hey@Santosh，非常感谢，它现在有点工作了，但有一个小问题。当它再次弹出时，计时器首先显示单击它的最后一秒，然后以我想要的时间开始。您可以设置

$（“计时器”）.text（'60'）

或

$（“计时器”）.text（“”）

计数器重置后。嘿@SanthoshNayak，它很有魅力，再次感谢，你可以通过接受这个答案来表达你的感谢。：）是的，它肯定是有帮助的@bassxzero

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);
                      }

              }
         });
*/
  }