为什么我的函数会继续从输入文本字段中读取输入?

时间:2013-04-11 20:51:42

标签: javascript html ajax input

我的html表单上的输入有问题。我肯定将输入的Twitter名称转换为Ajax函数,该函数通过php从twitter api调用tweet。 因为我有一个setInterval函数来继续检查更新,所以输入会一次又一次地传递到函数中以获取推文。

问题是该函数似乎是直接从文本输入框中的内容读取输入。因此,如果用户在不按Enter键或按下按钮的情况下更改文本,则该函数会继续将该文本作为输入读取。因此,按Enter键或按下按钮提交后,最初输入的输入不会被修复。

以下是输入输入的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>

以下是功能:

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

我希望输入按下后输入作为文本。我已经尝试将它分配给变量,但无法解决为什么它一直从输入字段读取。任何帮助表示赞赏。

2 个答案:

答案 0 :(得分:2)

这不是正式答案 - 只是试图澄清我的意见

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

var intervalstop;

function getStatusesX() {
   clearInterval(intervalstop);

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

}

通过这种方式初始化var并在函数内部首先清除,以确保它不会复合。然后将var设置为新的间隔以重新开始。

你说Twitter如果用户点击很多次就不喜欢这段代码 - 这很有道理。他们希望限制API,以防止有人每分钟发出50,000个请求,导致编码不当。您应该检查API规范以确保您位于实际区域内,并且如果要推动边界,请考虑在本地缓存结果。

答案 1 :(得分:1)

问题是每次调用getStatuses时都会重新读取文本框的值。

首先尝试捕获文本框的值,然后将其传递到getStatuses函数中:

所以你的新getStatusesX是:

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

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

有人说,如果可以开始这可能是一个问题 - 如果用户点击按钮多次自动刷新状态怎么办?您可能希望在单击按钮/文本框后禁用该按钮/文本框,或者首先将其保留为旧间隔。