javascript - javascript 中的clearInterval 和 setInterval 立即

Question

<script>                                   

主要功能:

var interval;                     
function refreshId(session_to_user) {
interval = setInterval(function()
{
$('.chat-box').load("<?php echo base_url()."users/message/refresh_div/"; ?>" + session_to_user);
}, 10000);
}

在这个主函数中，我只会在这里执行我的要求。我启用此功能的时间间隔是可变的，它将每 10 秒刷新一次。

函数的onclick

forloop
{   
<a href = "" onclick="myFunction(user_id)"
}   

function myFunction(user_id){      
clearInterval(interval); 
$.ajax({                        
success:function(data)
{     
    $('.chats').html(data);
}
})   
refreshId(session_to_user);  
}

如果有人单击 href，则应清除Interval(如果已存在)，否则必须在单击功能上建立新的间隔。在我当前的代码中，如果我第一次单击，它就会起作用。它开始每 10 秒刷新一次第一个链接，但是当我第二次单击第二个链接时，它会等待。尽管如此，第一个被执行，然后第二个正在执行。我的要求是，如果我单击，已建立的 setInterval 必须立即停止，并且必须当场启动新的 setInterval，就像我的下一个函数 paper_plane() 一样。

function paper_plane()
{  
clearInterval(interval); 
$.ajax({
 success:function(html)
{
$('#chat').append(html);
$('.chat-input').val('');
$('.chat-input').focus();
}
});
}
var side_bar_path = "<?php echo base_url()."users/message/load_side_bar"; ?>";
$.ajax({
success : function(data)
{
$('.msg-list').html(data);
}
});
refreshId(session_to_user); 
}   

Answer 1

在第一次点击处理程序经过延迟(10秒)后，您无法取消ajax请求，因为它不会立即返回结果。

因此，在进行新的 ajax 调用之前取消先前的 ajax 调用的唯一方法是在触发第二个链接后抑制/忽略先前的 ajax 调用的响应，这样您就可以创建一个您期望的场景。

下面我创建了一个小片段，它将执行上述场景。

JS 代码:

 var firstTimer;
//first click handler
$('#first').on('click',function () {

  firstTimer= setInterval(function (){
              $.ajax({
                 url:"http://target.org/page.html",
                 dataType: "POST",
                 data:{'name1':'davy'}
                 success: function(data) {
                     //suppress the response when timer is stopped. 
                     if(firstTimer>0){
                        return;
                     }    
                     //if timer is not stopped process the data    
                 },
                 error :function(error) {
                     //handle error
                 }     
              });
          },1000);
});

//second click handler
$('#second').on('click',function () {
  //clear the firstTimer before staring a new timer
  clearInterval(firstTimer);
  var timer;
  timer = setInterval(function (){
              $.ajax({
                 url:"http://target.org/page2.html",
                 dataType: "POST",
                 data:{'name1':'rog'}
                 success: function(data) {
                    //process the data 
                 },
                 error :function(error) {
                     //handle error
                 }    
              });
          },1000);
});