Question

HTML代码：<input id="goTOxQuestion">
js代码：

$("#goTOxQuestion").keyup(function(){
    // send a XHR
})

如果输入为12345，它将发送XHR五次。
实际上，我只希望在完成输入后执行XHR。我的意思是，在500毫秒内没有输入（没有keydown事件），而是失去了焦点我的解决方案不完整：

var isOver = false;
$("#goTOxQuestion").keyup(function(){
    //...
    setTimeout(function(){
        if(isOver){
            //send a XHR
        }
    },500);
})
$("#goTOxQuestion").keydown(function(){
    isOver = false;
})

Answer 1

然后使用setTimeout：

$("#goTOxQuestion").keyup(function(){
    setTimeout(function(){
        // send a XHR
    }, 1000);
})

Answer 2

change event似乎非常适合您的需求：

$("#goTOxQuestion").change(function(){
    // send a XHR
})

当输入失去焦点且输入值实际被修改时，将触发它。

Answer 3

您可以像这样使用setTimeout和clearTimeout的组合：

var hTimeout;
$("#goTOxQuestion").keyup(function () {
    if (hTimeout) {
        clearTimeout(hTimeout);
    }
    hTimeout = setTimeout(function () {
        // ajax code here
    }, 500);
});

Demo here

请注意，AJAX请求完成的顺序无法保证，您最终会遇到“竞争条件”。

关于你的评论，这是我心目中的解决方案：

// initialize global counter
var xhrCount = 0;
// increment counter when you create an XHR
xhrCount++;
// pass the current value of this
// variable to the success function
// http://stackoverflow.com/q/1552941/87015
$.ajax("/url/", (function (myStamp) {
    console.log("creating success callback #" + myStamp);
    return function () {
        if (myStamp === xhrCount) {
            console.log("firing success handler");
        } else {
            console.log("suppressing success handler");
        }
    }
})(xhrCount));

Answer 4

$(document).on('blur',"#goTOxQuestion",function(){
    // send a XHR
});

当用户＆＃34;完成时发送XHR＆＃34;输入而不是键盘

4 个答案: