Javascript 根据文本输入动态更新词典

假设我有一个输入文本的文本框。它下面有一个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(" ");
});

var有效性=
{
“a”：是的，
“aa”：错，
“aaa”：错误
};
document.getElementById（“编辑”）.addEventListener（'keyup'，function（）{
text_数组=this.value.split（“”）；
var输出=[]；
对于（var i=0；i

我还有一个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);
});

var定时器；
document.getElementById（“编辑”）.addEventListener（'keyup'，function（）{
清除超时（计时器）；
var timer=setTimeout（函数（）{
text_数组=this.value.split（“”）；
var输出=[]；
对于（var i=0；i

---

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

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

使用

setTimeout（）

---

如果用户输入“a”，则结果是ajax请求。但是，当发出此请求时，如果用户通过键入“s”来完成“a”，那么标记是否会停止“as”被请求？始终定期将所有输入文本发送到PHP进行处理，例如每100毫秒。当Ajax请求完成时，显示不正确的突出显示。这允许用户退格并编辑其输入（假设您允许）。当两个文本框不一致时，这会导致短时间间隔。我不认为您可以避免这种情况，除非在Ajax请求挂起时阻止用户输入。如果我们说服务器需要1秒的时间来回复，除了div文本更新缓慢之外，还会有什么问题吗？这不应该有问题，只要您向用户显示他们的输入已被识别并且正在生成响应。例如，等待微调器可以很好地工作。如果我们说服务器需要1秒的时间来回复，除了div文本更新缓慢之外，还有什么问题吗？请参阅@rorymcrossan对同一问题的回答

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