如何使用 AJAX 正确管理快速输入？答案

【问题标题】：How to properly manage fast input with AJAX?如何使用 AJAX 正确管理快速输入？
【发布时间】：2014-09-17 18:25:37
【问题描述】：

我不确定如何正确管理输入 html 标记的快速输入。

基本上我有两个这样的检查，它会生成很多输入事件。

尤其是当用户输入像 0.045 时。它提供 5 个事件。

我想摆脱它们并发送最后一个值 0.045 并通过 AJAX 发送到数据库。

我是否使用了某种计时器或其他东西？（当然可以的话。）

谢谢！

  $(".myCLass").on('change keyup paste', function (event) {
            if (event.which == 45 || event.which == 189) {
                event.preventDefault();
            }

            UpdateValue(this);
        });

        $(".myCLass").keydown(function (e) {
            // Allow: backspace, delete, tab, escape, enter and  ./,
            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, @Model.NumberDecimalSeparatorHtmlCode]) !== -1 ||
                // Allow: Ctrl+A
                (e.keyCode == 65 && e.ctrlKey === true) ||
                // Allow: home, end, left, right
                (e.keyCode >= 35 && e.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
            }
            // Ensure that it is a number and stop the keypress
            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }

            UpdateValue(this);
        });

【问题讨论】：

标签： javascript jquery ajax input

【解决方案1】：

您必须使用timeout 和clearTimeout.

类似这样的：

var timeoutID;
$(".myCLass").keydown(function(e){
    //do any checks
    //clearTimeout
    if(typeof timeoutID == "number") {
       window.clearTimeout(timeoutID);
       delete timeoutID;
    }

    var element = this;
    timeoutID = window.setTimeout(function (e) {
            UpdateValue(element);
    }, 1000);

});

这将清除并将超时设置为每次按键一秒。您的 keyup 函数也可以完成同样的事情。

【讨论】：

谢谢！这就是我要找的！

【解决方案2】：

解决这个问题的方法是使用setTimeout 和clearTimeout，这样事件仍然会发生，但是 ajax 不会触发，直到足够的时间过去了，你确定用户已经投入您想要的正确信息。这是我使用您的代码作为示例来完成此操作的方法

jQuery(function() {
    $(".myCLass").keydown(function (e) {
        var el = this;
        // Allow: backspace, delete, tab, escape, enter and  ./,
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, @Model.NumberDecimalSeparatorHtmlCode]) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }//END IF
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }//END IF

        //assuming this is the function used to ajax use a setTimeout
        //if this event has not happened for 2 seconds, execute it
        if (holdEventTO != undefined) {
            clearTimeout(holdEventTO);
        }
        holdEventTO = setTimeout(function() {
            UpdateValue(this);
            delete window.holdEventTO;
        }, 2000);
    });
});

请注意我在清除变量holdEventTO 之前如何检查它是否已设置以防止错误。我还删除了该变量，以便下次事件触发它时，这是我们第一次将它用于 ajax。您可以通过将我的 2000 替换为另一个数字来更改超时时间（请注意，该数字以千分之一秒为单位，因此 1000 是一秒。）

【讨论】：