我如何防止我的密钥功能成为一个字符延迟

Question

我有一个 textarea，当我写东西时，文本应在同一时刻出现在我的result框中。

我正在使用keyup功能，还测试了keydown。但是我的问题是，插入物是一个字符延迟。或者，如果我快速编写，则可能是更多字符。

所以我写

abcdf

进入我的textarea，在我的result框中，结果为

abcd

如果我添加了另一个字符，例如z，则f出现。

$(document).off("click", ".button").on("click", ".button", function (event) {
  $.ajax({
     url: "update.php",
        data: {
        },
        type: "POST",
        success: function (data) {
            $('.textarea').wysihtml5({
                events: {
                    load: function() {
                        var some_wysi = $('.textarea').data('wysihtml5').editor;
                        $(some_wysi.composer.element).bind('keyup', function(){ 
                         var text = $( ".textarea").val();
                            $(".box[data-select='true']").find($('.result')).val(text);
                        }
                     }
                }
            })
         }
     })
  }
<button class="button">button</button>
<textarea class="textarea"></textarea>
<div class="box" data-select="true"><div class="result"></div></div>

Answer 1

通常，当观察使用用户输入的字段更改时，键盘事件不是正确的关注。考虑用户右键单击字段并从上下文菜单中选择"粘贴"的情况。还存在事件相对于更新字段值的顺序问题。

相反，请使用input事件，或(在您的特定情况下(Wysiwyg编辑器提供的任何"值更改"事件(可能是change或其他内容(。

---

如果已记录的事件都没有起作用，则A 非常不完美的解决方案可能是通过setTimeout延迟您的更新一个事件循环。

// A flag so we don't schedule timer callbacks repeatedly
var timerPending = false;
// Our callback function
function handleUpdate() {
    timerPending = false;
    var text = $( ".textarea").val();
    $(".box[data-select='true']").find($('.result')).val(text);
}
// Hook a bunch of events to try to get as broad a set of notifications as possible
$(some_wysi.composer.element).bind('keydown keyup keypress input change', function() { 
    // Since we're hooking multiple events, we may get multiple notifications
    // within the same event loop; only setup a timer callback for the first one
    if (!timerPending) {
        timerPending = true;
        setTimeout(handleUpdate, 0);
    }
}