根据文本条目动态更新词典

Dynamically updating dictionary on text entry

本文关键字：动态 更新 本条 文本条      更新时间：2023-09-26

假设我有一个文本框，在其中输入文本。在它下面，我有一个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调用是异步的，甚至在我从服务器得到第一个回复之前，当用户快速在框中输入文本时，很可能会对脚本发出新的请求。我该如何处理？

您可以使用超时来仅在键入停止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毫秒。您可以根据需要调整该值，使其响应能力更强/更低。

使用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/

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

相关文章：