即时搜索功能落后一键

Question

我的网站上有一种使用即时搜索功能的“翻译”程序。 我有一个文本区域

<textarea name="text" onkeydown="searchq();"></textarea>

运行 searchq() 函数

function searchq() {
    var searchTxt = $("textarea[name='text']").val();

    $.post("translate.php", {text: searchTxt}, function(output){
        $("#translated").html(output);
    });
}

将每个单词发送到 translate.php

if(isset($_POST["text"])){
    $words = explode(' ',$_POST['text']);

    $i = 0;
    foreach($words as $word){
        // performs transformations on the words
        $output = $word . " ";
        echo($output);
        $i++;
    }
}

但是，如果您在我的网站http://saaa.me/MattSpeak.html上尝试一下，您可以清楚地看到，如果您输入“y”，则不会显示任何内容，并且仅当您输入下一个字母或空格时“y”会出现吗？ 即时翻译过程似乎落后了一个字符。 这是什么原因造成的？ （商标标志和“er”字尾是我在“翻译”中添加的内容）

我对为什么这不能正常工作有一点想法，但不知道如何解决它。 帮助将不胜感激。

Answer 1

keydown事件在被添加的字符之前（甚至keypress事件在它之前）。 如果您想响应输入的字母，响应input或者对于较旧和/或有问题的浏览器（基本上是IE9 和更早版本），使用简短的setTimeout响应keypress 。

使用input ：

 $("textarea").on("input", function() { $("<p>").text($(this).val()).appendTo(document.body); });

 <textarea></textarea> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

使用带有setTimeout keypress以便添加字符：

 $("textarea").on("keypress", function() { var $this = $(this); setTimeout(function() { $("<p>").text($this.val()).appendTo(document.body); }, 0); });

 <textarea></textarea> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

我倾向于响应一系列事件并使用去抖动，所以我不会多次响应：

 var lastSearch = null; $("textarea").on("input keyup change", function() { var search = $(this).val(); if (search !== lastSearch) { lastSearch = search; $("<p>").text(search).appendTo(document.body); } });

 <textarea></textarea> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>