On Key Up 与 On Change with AJAX 查询：哪个更好？

Question

我将 POST 数据从文本框发送到 PHP 页面进行处理。 AJAX 不是用户点击保存按钮，而是用于文本框事件。

我在使用 onChange 或 onKeyUp 之间纠结。

OnKeyUp 需要在服务器上进行更多处理，因为每次按键我的脚本都必须访问数据库并进行更改。服务器性能可能是个问题。

OnChange 是首选，因为它仅在用户完成该框时才发送更改。但是存在一个问题，如果使用时不取消选择文本框，则不会发生'onChange'事件，因此不会保存更改。

哪个最好？或者有没有办法在用户不取消选择框的情况下强制执行“onChange”？

Answer 1

您甚至可以使用 KeyUp 按下 ajax 调用，如何？ 只需在 keyUp 事件上添加 delayKeyUp 函数，并且 delayKeyUp 函数具有 setTimeout 方法，这将真正帮助您解决服务器处理问题，

注意：这一次只适用于一种方法。

例如。代码：

更新：

$("selector").live('keyup', function(e) { //if jquery v1.7 or more then you can use .on event instead of .live
    delayKeyUp(function(){ ---Your Server Call Stuff -----}, 350); //delay of 350ms.
    return false;
});


var delayKeyUp = (function(){
     var timer = 0;
     return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
     };
})();

Answer 2

在什么情况下用户不会模糊文本框，导致 AJAX 不发生？

一种可能的解决方案是为 keyDown 和 keyUp 设置超时，以便在一段时间没有输入之后，AJAX 将触发，类似于这些行。这可能有一个错误，如果您在该文本框的 $.ajax 运行之前开始输入另一个文本框，它可能不会更新文本框，但您应该能够理解

var key_is_down = false,
    key_timeout;

$(el).on('keyDown', function () {
    key_is_down = true;
}).on('keyUp', function () {
    key_is_down = false;
    key_timeout = setTimeout(function(){ runAjax($(this)); }, 2500);
});

function runAjax ($el) {
    if (key_is_down) {
        key_timeout = setTimeout(function(){ runAjax($el); }, 2500);
    } else {
        // $.ajax...
    }
}

Answer 3

window.page_loaded = new Date();
$('text_field').bind('keyup', function(){
    var timeout_seconds = 10;

    var last_check = $(this).data('last_checked');
    last_check = last_check ? last_check : window.page_loaded;
    var curr_time = new Date();
    curr_time = new Date(curr_time.getTime() - (timeout_seconds * 1000));
    if(last_check < curr_time){
        //now do the checking
    }
});