3

テキストを入力するテキスト ボックスがあるとします。その下に、次のように、入力されたテキストを表示する div があり、スペルが正しいかどうかに基づいて単語を強調表示します。

var validity = 
{
    "a": true,
    "aa": false,
    "aaa": false
};

document.getElementById("edit").addEventListener('keyup', function () {
    text_array = this.value.split(" ");

    var output = [];
    for (var i = 0; i< text_array.length; i++) {  
        output.push('<span class="' + group(validity[text_array[i]]) + '">' + text_array[i] + '</span>');
    }

    document.getElementById("text").innerHTML = output.join(" ");
});

http://jsfiddle.net/barra/aC9nt/12/

また、単語の配列を渡すことができ、有効かどうかを伝えるjson経由で応答するphpスクリプトもあります。

テキストが入力されると、動的な方法でこのスクリプトにリクエストを送信したいと考えています。ただし、php スクリプトへの ajax 呼び出しは非同期であり、サーバーから最初の応答を受け取る前に、ユーザーがボックスにテキストをすばやく入力すると、スクリプトへの新しい要求が行われる可能性があります。これにどのように対処すればよいですか？

4

3 に答える 3

2

タイムアウトを使用して、入力が x ミリ秒停止した後にのみ要求を送信できます。これを試して：

var timer;
document.getElementById("edit").addEventListener('keyup', function () {
    clearTimeout(timer);
    var timer = setTimeout(function() {
        text_array = this.value.split(" ");

        var output = [];
        for (var i = 0; i< text_array.length; i++) {  
            output.push('<span class="' + group(validity[text_array[i]]) + '">' + text_array[i] + '</span>');
        }

        document.getElementById("text").innerHTML = output.join(" ");

        // send ajax request with the values
    }, 500);
});

これにより、入力が停止してから 500ms までリクエストが行われなくなります。その値を調整して、必要に応じて応答性を上げたり下げたりすることができます。

于 2013-08-15T14:56:32.687 に答える
0

フラグを使用して、Ajax リクエストが保留中であることを示します。リクエストを送信する場合は、フラグを確認します。設定されている場合は Ajax リクエストを送信しないでください。それ以外の場合は、フラグを設定してリクエストを送信します。リクエストが完了すると、フラグがクリアされます。

于 2013-08-15T15:01:17.013 に答える