Javascript JS递归代码工作不正常

我正试图开发一个聊天室来扩展我对JS和jQuery的了解，但我遇到了很多麻烦。我有一个功能，可以检查文本文件并将其中的行数与聊天室中的行数进行比较；如果文本文件中有更多内容，聊天室将更新。我想每300毫秒检查一次

当我开始这个项目时，我有一种感觉，setInterval是一种糟糕的做法，我在谷歌上搜索了一下。我发现了它，并跟着它走；这对我不起作用。如何修复此代码以正确使用setTimeout？ 我还注意到setInterval在Firefox中造成了严重的延迟

以下是我正在使用的代码：

setInterval(loadchat, 300);

function loadchat(){
var chatdisp = document.getElementById('chatdisplay');
$.get("chat.txt", function(data){
    var loadrowct = data.split("\n"); //split lines in the text file into array
    var currchat = $("#chatdisplay").html(); //lines currently loaded
    var currowct = currchat.split("<br>"); //split current lines into array

    if (loadrowct.length == currowct.length){
        //No need to update.
        return;
    }else{
        $.ajax({
            url : "chat.txt",
            dataType: "text",
            success : function (data) {
                data = data.replace(/\n/g, "<br/>");
                console.log("Updated chat");
                if (chatdisp.scrollTop == (chatdisp.scrollHeight - chatdisp.offsetHeight + 6)){ //this adds 6 to make up for the CSS border
                    $("#chatdisplay").html(data);
                    document.getElementById('chatdisplay').scrollTop = document.getElementById('chatdisplay').scrollHeight;
                }else{
                    $("#chatdisplay").html(data);
                    $("#chatdisplay").css("border-bottom","3px solid #FF7700");
                }
            }
        });
    }
});
}

我在网上调查过这个问题，经常看到这个问题，我想一定是我做错了什么，因为我所做的一切都不起作用

以下是我正在尝试的：

function loadchat(){
console.log("Running the loadchat function");
var chatdisp = document.getElementById('chatdisplay');
$.get("chat.txt", function(data){
    var loadrowct = data.split("\n"); //split lines in the text file into array
    var currchat = $("#chatdisplay").html(); //lines currently loaded
    var currowct = currchat.split("<br>"); //split current lines into array

    if (loadrowct.length == currowct.length){
        //No need to update.
        return;
    }else{
        data = data.replace(/\n/g, "<br/>");
        console.log("Updated chat");
        if (chatdisp.scrollTop == (chatdisp.scrollHeight - chatdisp.offsetHeight + 6)){ //this adds 6 to make up for the CSS border
            $("#chatdisplay").html(data);
            document.getElementById('chatdisplay').scrollTop = document.getElementById('chatdisplay').scrollHeight;
        }else{
            $("#chatdisplay").html(data);
            $("#chatdisplay").css("border-bottom","3px solid #FF7700");
        }
    }
    setTimeout(function(){loadchat();},1000);
});
}

setTimeout(function(){loadchat()},1000);

---

将两个ajax调用合并为一个。你没有理由下载同一个文件两次

比如：

if (loadrowct.length == currowct.length){
    //No need to update.
    return;
}else{
    data = data.replace(/\n/g, "<br/>");
    console.log("Updated chat");
    if (chatdisp.scrollTop == (chatdisp.scrollHeight - chatdisp.offsetHeight + 6)){ //this adds 6 to make up for the CSS border
        $("#chatdisplay").html(data);
        document.getElementById('chatdisplay').scrollTop = document.getElementById('chatdisplay').scrollHeight;
    }else{
        $("#chatdisplay").html(data);
        $("#chatdisplay").css("border-bottom","3px solid #FF7700");
    }
}

---

这将确保只有在旧请求完成时才启动新请求。

我不明白为什么需要第二个ajax calloops。。。很抱歉，第一次使用jQuery的ajax函数时，忽略了这个lol。谢谢你告诉我这一点。谢谢你告诉我如何组合这些函数！但我真的更希望聊天室尽可能响应——2000ms的速度相当慢；有更好的方法吗？只要使用setTimeout，就可以将其设置回原始值。否则，多个请求可能会开始重叠，我相信这就是Firefox变慢时的情况。我在$.get函数末尾添加了一个setTimeout，它似乎根本不会递归。我应该用我的尝试或聊天室的链接或其他什么来编辑我的原始问题吗？你最初调用loadchat吗？顺便说一句，这两个函数都不会导致你的函数递归。递归是指函数调用自身，并导致函数堆栈增长。在这种情况下，函数通知javascript的主循环再次调用它，然后退出。堆栈永远不会增长，当调用新函数时，它无法将其值返回到上一个函数。

setTimeout(loadchat, 3000);