내 기능이 입력 텍스트 필드에서 입력을 계속 읽는 이유는 무엇입니까?

Question

내 HTML 양식의 입력에 문제가 있습니다. Curently 나는 트위터 API에서 트윗을 PHP를 통해 호출하는 Ajax 함수에 트위터 이름을 입력합니다. 업데이트를 계속 확인하는 setInterval 함수가 있기 때문에 입력이 반복적으로 함수로 전달되어 트윗을 가져옵니다.

문제는 함수가 텍스트 입력 상자에있는 내용에서 직접 입력을 읽는 것 같습니다. 따라서 사용자가 버튼을 누르거나 누르지 않고 텍스트를 변경하면 함수는 해당 텍스트를 입력으로 계속 읽습니다. 입력을 처음 입력 한 후에는 입력 버튼을 누르거나 제출 버튼을 누르면 수정되지 않습니다.

function getStatusesX() { 

    var userID = document.getElementById("userid").value; 
    getStatuses(userID); 
    var intervalstop = setInterval(function() {getStatuses(userID);}, 20000); 
    clearInterval(intervalstop);} 

//Create a cross-browser XMLHttp Request object 
function getXMLHttp() { 

    var xmlhttp; 
    if (window.ActiveXObject) { 
     XMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } else if (window.XMLHttpRequest) { 
     XMLHttp = new XMLHttpRequest(); 
    } else { 
     alert("Your browser does not support XMLHTTP!"); 
    } 
    return XMLHttp; 
} 

//function that searches for the tweets via php 
function getStatuses(userID){ 

XMLHttp1 = getXMLHttp(); 

    //ajax call to a php file that will extract the tweets 
    XMLHttp1.open('GET', 'TwitterGlimpsePHP.php?userid='userID, true); 

    // Process the data when the ajax object changes its state 
    XMLHttp1.onreadystatechange = function() { 
     if(XMLHttp1.readyState == 4) { 
      if(XMLHttp1.status ==200) { //no problem has been detected 
       document.getElementById("tweetbox").innerHTML=XMLHttp1.responseText; 
      } 
     } 
    } 
    XMLHttp1.send(null); 
} 

내가 텍스트 후 누르면 입력으로 입력이주의 할 다음은 함수입니다

<div id="topdiv">Input Twitter ID: <input type="text" id="userid" onkeydown="if(event.keyCode===13) {document.getElementById('tweet-button').click();}"> 
<input type="submit" id="tweet-button" onclick="getStatusesX();" value="Get recent tweets"> 
<p id="tweetbox"></p> 
</div> 

: 여기

입력에 복용 HTML 양식입니다. 변수에 할당하려고 시도했지만 입력 필드에서 계속 읽는 이유를 알아낼 수 없습니다. 어떤 도움을 주셔서 감사합니다.

Answer 1

이 공식적인 답변을하지 않습니다 -이 내가 함수 외부 선언을 의미하는 것입니다

내 의견 정리하려고 ...

var intervalstop; 

function getStatusesX() { 
    clearInterval(intervalstop); 

    var userID = document.getElementById("userid").value; 
    getStatuses(userID); 
    intervalstop = setInterval(function() {getStatuses(userID);}, 20000); 

} 

당신이 내부의 VAR 및 초기화하는 방법 첫 번째로 지우는 기능이 복잡하지 않은지 확인하십시오. 그런 다음 var를 새로운 간격으로 설정하여 다시 시작합니다.

사용자가 여러 번 클릭하면 트위터가이 코드에 대해 좋아하지 않는다고 말했습니다. 완벽한 말이됩니다. 그들은 부적절한 코딩의 원인으로 분당 50,000 건의 요청을하지 못하도록 API를 제한하려고합니다. 현실적인 영역에 있는지 API 사양을 확인하고 경계를 푸시하는 경우 결과를 로컬에서 캐싱하는 것을 고려해야합니다.

Answer 2

getStatuses가 호출 될 때마다 텍스트 상자의 값을 다시 읽는 것이 문제입니다.

먼저 텍스트 상자의 값을 캡처 시도하고 getStatuses 기능으로 전달 :

그래서 새로운 getStatusesX은 다음과 같습니다

function getStatusesX() { 
    var userID = document.getElementById("userid").value; 
    getStatuses(userID); 
    setInterval(function() { 
     getStatuses(userID); 
    }, 20000); 
} 

업데이트 getStatuses는 사용자 ID 매개 변수를 받아 줄 곳을 삭제 getStatuses 내부에서 텍스트 상자의 값을 읽는 것입니다.

사용자가 버튼을 클릭하여 여러 번 상태를 새로 고침하면 어떻게 될까? 클릭 한 후에 버튼/텍스트 상자를 비활성화하거나 이전 간격을 먼저 삭제하도록 할 수 있습니다.