Question

我正在尝试开发一个聊天室来扩展我对JS和jQuery的了解，但是我遇到了很多麻烦。我有一个函数检查文本文件，并将其中的行数与聊天室中的行数进行比较;如果文本文件中有更多内容，则聊天室会更新。我希望每300毫秒检查一次。

当我开始这个项目时，我有一种感觉setInterval是不好的做法，我用Google搜索了一下。我发现this tutorial并遵循它;这对我不起作用。如何修复此代码以正确使用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);

Answer 1

将两个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");
    }
}

其次，300ms的setInterval太多了。尝试使用更保守的值，如2000ms - 我打赌你的一些往返时间超过300毫秒，所以你经历了堆叠的请求（从而减慢了火狐）

更好的方法是在请求完成后调用setTimeout - 在函数$.get回调函数结束时调用{/ 1}：

setTimeout(loadchat, 3000);

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

JS递归代码无法正常工作

1 个答案: