javascript中的clearInterval和setInterval Instantly答案

【问题标题】：clearInterval and setInterval in javascript Instantlyjavascript中的clearInterval和setInterval Instantly
【发布时间】：2023-03-19 11:29:01
【问题描述】：

<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 秒刷新一次。

点击功能

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，否则必须在点击函数上建立一个新的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); 
}

【问题讨论】：

你能在 plunker/fiddle 上复制这个吗？
没有任何显示表明clearInterval() 不会按照您的意愿行事。如前所述;复制问题的演示会有所帮助
当您单击第二个链接以清除间隔时，您是在 10 秒过后还是之前执行此操作？
@dreamweiver 我在单击第一个链接后单击第二个链接，因此当我单击第二个链接时，第一个 setInterval 将被忽略，它会等待第一个 setInterval 完成，然后是第二个被执行
这很明显，因为当第一次设置时间间隔被触发时，它对服务器进行了 Ajax 调用，但不会立即返回响应，因此在 10 秒后无法取消该调用。

标签： javascript jquery

【解决方案1】：

从first click handler 过去延迟（10 秒）后，您无法取消 ajax 请求，因为它不会立即返回结果。

因此，在进行新的 ajax 调用之前取消之前的 ajax 调用的唯一方法是在触发第二个链接后将之前的 ajax 调用的响应发送到 suppress/ignore，这样您将创建一个您所期望的场景。

下面我创建了一个小sn-p，它将执行上述场景。

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

【讨论】：