JS 재귀 코드가 제대로 작동하지 않습니다.

Question

JS 및 jQuery에 대한 지식을 넓히기 위해 대화방을 개발하려고하지만 많은 문제가 있습니다. 나는 텍스트 파일을 검사하고 그것에있는 줄의 양을 chatroom의 줄의 양과 비교하는 함수를 가지고있다; 텍스트 파일에 더 많은 내용이 있으면 대화방이 업데이트됩니다. 300 밀리 초마다 확인하고 싶습니다.

이 프로젝트를 시작했을 때, 나는 setInterval이 나쁜 습관이었고 나는 조금 주위를 봤다고 생각했습니다. 나는 this tutorial을 발견했고 그것을 따라 갔다. 이것은 나를 위해 작동하지 않았다. setTimeout을 올바르게 사용하려면 어떻게해야합니까? (나는 Firefox에서 심각한 지연을 초래하는 setInterval을 발견했습니다). 여기

내가 함께 일하고 있어요 코드입니다 :

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

두 아약스 하나를 호출 병합합니다. 같은 파일을 두 번 다운로드 할 이유가 없습니다.

그래서 같은 :

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와 같이 좀 더 보수적 인 값을 사용해보십시오. 왕복 여행 중 300ms 이상이 걸려서 서로 겹쳐서 (그리고 따라서 파이어 폭스 속도가 느려짐) 경험이 많을 것입니다.

더 좋은 방법은 setTimeout으로 전화하는 것입니다. 귀하의 요청이 완료된 후 - 함수 $.get 콜백 함수의 끝에서 :

setTimeout(loadchat, 3000); 

이는 이전이 완료되면 새 요청은 시작되도록해야합니다.