javascript - 为什么这个clearInterval总是在函数完成时起作用？

Question

我是网络编程新手，现在正在学习 javascript 和 jquery ajax..

这是我的 JavaScript 代码。刷新变量是每 2 秒刷新聊天的时间间隔(从数据库获取聊天并将其显示在聊天容器中)。我想停止间隔，然后在提交消息后将新消息附加到容器。

问题是当我按下回车键时，新的聊天会附加到容器中，是的。但突然容器被刷新并用数据库中的记录替换该新消息(所以它消失了(clearInterval 尚未工作))。然后，当函数完成时，clearInterval 正在工作。为什么？为什么？ :(

var oldscrollHeight;
var newscrollHeight;
var refresh;
function refreshChats(){
  oldscrollHeight = $(".chatContainer").prop("scrollHeight");
  $.ajax({  
    url:"get_chats.php",  
    cache: false,  
    success: function(html){          
        $(".chatContainer").html(html);     

        //Auto-scroll             
        newscrollHeight = $(".chatContainer").prop("scrollHeight");  
        if(newscrollHeight > oldscrollHeight){  
            $(".chatContainer").prop({ scrollTop:         $(".chatContainer").prop("scrollHeight") });
       }                 
    }  
  });  
}

$("document").ready(function(){

  refresh = setInterval(refreshChats,2000);

  $(".chatValue").keypress(function(e){
    if(e.keyCode == 13 && $(".chatValue").val() != ""){
        clearInterval(refresh);
        var me = $(".me").val();
        var chat = $(".chatValue").val();
        var time = $(".timeChat").val();
        $(".chatContainer").append(me+": "+chat+" ("+time+")"); //showing a new message before database updated
        $(".chatValue").val("");
        $.post("chat.php",{submitChat: true,chat: chat,time: time});
    } 
  });

});

Answer 1

大概 refreshChats 执行 Ajax。

清除间隔后，您将阻止 refreshChats 再次运行。

如果 HTTP 请求已发送，则不会阻止 HTTP 响应到达时触发事件处理程序，因此仍会处理响应。

您需要设置一个标志来取消响应的处理(或者使成功处理程序中止而不执行任何重要操作)。