如何防止我的 keyup 函数延迟一个字符？

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

一般来说，在观察用户输入的字段变化时，键盘事件不是应该观察的正确对象。考虑用户右键单击该字段并从上下文菜单中选择 "paste" 的情况。还有一个问题是事件发生的顺序与更新字段的值有关。

相反，使用 input 事件，或（在您的特定情况下）您的所见即所得编辑器提供的任何 "the value changed" 事件（可能是 change 或其他）。

如果 none 记录的事件有效，非常不完善 的解决方案可能是通过 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);
    }
}

如何防止我的 keyup 函数延迟一个字符？

How can I prevent my keyup function to be one character delayed?

jquery

ajax

function

keyup

wysihtml5