1

HTML フォームへの入力に問題があります。現在、Twitter の名前である入力を、Twitter API から php を介してツイートを呼び出す Ajax 関数に取り込んでいます。更新をチェックし続ける 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);
}

Enterキーを押した後、入力をテキストとして取得したい。変数に割り当てようとしましたが、入力フィールドから読み取り続ける理由がわかりません。どんな助けでも感謝します。

4

2 に答える 2

2

これは公式の回答ではありません - 私のコメントを片付けようとしているだけです

これが、関数の外側で宣言することの意味です...

var intervalstop;

function getStatusesX() {
   clearInterval(intervalstop);

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

}

そうすれば、変数を初期化し、関数内で最初にクリアして、複合していないことを確認します。次に、変数を新しい間隔に設定して、再び開始します。

ユーザーが何度もクリックすると、Twitterはこのコードについて何か気に入らないとあなたは言いました-完全に理にかなっています。API を調整して、誰かが不適切なコーディングの原因となる 1 分あたり 50,000 のリクエストを作成するのを防ぐ必要があります。API 仕様をチェックして、現実的なゾーン内にいることを確認し、境界を押し広げている場合は、結果をローカルにキャッシュすることを検討する必要があります。

于 2013-04-11T23:55:54.947 に答える
1

問題は、getStatuses が呼び出されるたびにテキスト ボックスの値を再読み取りしていることです。

最初にテキストボックスの値をキャプチャして、それを getStatuses 関数に渡してみてください。

したがって、新しい getStatusesX は次のとおりです。

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

getStatuses を更新して userID パラメータを取得し、getStatuses 内のテキスト ボックスの値を読み取っている行を削除します。

そうは言っても、そもそもこれが可能である場合は問題になる可能性があります。ユーザーがボタンをクリックしてステータスを自動的に更新するとどうなるでしょうか。クリックされた後にボタン/テキストボックスを無効にするか、最初に古い間隔を clearInterval にすることができます。

于 2013-04-11T20:57:52.790 に答える