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/

我还有一个 php 脚本，它可以传递一个单词数组，并通过 json 回复它们是否有效。

我希望在输入文本时以动态方式向该脚本发出请求。但是，对 php 脚本的 ajax 调用是异步的，甚至在我从服务器获得第一个回复之前，当用户快速在框中输入文本时，很可能会向脚本发出新请求。我应该如何处理？

4

3 回答 3

2

使用setTimeout() http://www.w3schools.com/jsref/met_win_settimeout.asp

var timer = null;

$('#testInput').on('keyup',function(event){
    $this = $(this);
    clearTimeout(timer);
    timer = setTimeout(function(){
        var input = $this.val();
        //this is where you would post your data to the server
        alert(input);
    }, 500);
});

http://jsfiddle.net/Q3sMw/1/

于 2013-08-15T15:03:38.703 回答
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);
});

这将阻止在键入停止后 500 毫秒后发出请求。您可以根据需要调整该值以使其响应更多/更少。

于 2013-08-15T14:56:32.687 回答
0

使用标志来指示 Ajax 请求处于未决状态。当您要发送请求时检查标志，如果已设置则不发送 Ajax 请求，否则设置标志并发送请求。当请求完成时清除标志。

于 2013-08-15T15:01:17.013 回答