为什么函数总是从输入文本字段中读取输入?

The input on my html form has a problem. Curently I am taking the input which is a twitter name into an Ajax function that calls tweets via php from the twitter api. As I have a setInterval function to keep checking for updates, the input is passed again and again into the function to get tweets.

我的html表单上的输入有问题。我将输入(twitter名称)转换为Ajax函数，该函数通过来自twitter api的php调用tweet。当我有一个setInterval函数来不断检查更新时，输入会被一次又一次地传递到函数中以获取tweet。

The problem is that the function seems to be reading the input directly from what is in the text input box. So if the user changes the text without pressing enter or hitting the button, the function keeps reading that text as the input. So the input entered initially is not fixed after pressing enter or hitting the button to submit.

问题是，函数似乎直接从文本输入框中读取输入。因此，如果用户在不按enter或按下按钮的情况下更改文本，函数将继续读取该文本作为输入。因此，在按下enter或按下submit按钮后，最初输入的输入不是固定的。

Here is the html form taking in the input:

这里是输入的html表单:

<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>

Here are the functions:

这是功能:

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);
}

I want the input to be taken as the text after enter is pressed. I have tried assigning it to variables but cannot work out why it keeps reading from the input field. Any help appreciated.

我希望输入被作为输入后的文本被按下。我已经尝试将它赋值给变量，但无法找出为什么它总是从输入字段中读取。任何帮助表示赞赏。

2 个解决方案

#1

This is not an official answer - just trying to clear up my comments

这不是一个官方的答案——只是试图澄清我的观点

This is what I mean by declaring outside the function...

这就是我在函数外面声明的意思…

var intervalstop;

function getStatusesX() {
   clearInterval(intervalstop);

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

}

that way you initialize the var and inside the function you clear first to ensure it's not compounding. Then you set the var to a new interval to begin again.

这样可以初始化var，并在函数中首先清除以确保它不是复利。然后将var设置为一个新的间隔，以重新开始。

You said twitter doesn't like something about this code if the user clicks many times - Makes perfect sense. They will want to throttle the API to prevent someone from making 50,000 requests per minute cause of improper coding. You should check the API specs to make sure you're within a realistic zone and consider caching the results locally if you are pushing boundaries.

你说如果用户多次点击，twitter不喜欢这个代码，这很有意义。他们会想要限制API，以防止某人每分钟发出5万个请求，导致编码不当。您应该检查API规范，以确保您处于一个实际的区域内，并考虑在您正在推进边界时在本地缓存结果。

#2

The issue is that you are re-reading the value of the textbox every time getStatuses is called.

问题是每次调用getstatuse时，都要重新读取文本框的值。

Try capturing the value of the textbox first, and passing it into your getStatuses function:

首先尝试获取文本框的值，并将其传入getstatuse函数:

So your new getStatusesX is:

你的新getStatusesX是:

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

Update getStatuses to take a userID parameter and delete the line where you're reading the textbox's value inside of getStatuses.

更新getStatuses，获取userID参数，并删除在getstatuse中读取文本框值的行。

That having been said, it might be an issue if this is possible to begin with - what if the user clicks the button to automatically refresh statuses multiple times? You might want to disable the button/textbox after it's been clicked, or have it clearInterval the old interval first.

有人说过，这可能是一个问题，如果这是可能开始的-如果用户单击按钮自动刷新状态多次?您可能想要在被单击之后禁用按钮/文本框，或者先将旧的间隔设置为clearInterval。

#1