jquery - 等待功能，直到用户停止输入

Question

我有用户在打字时进行 ajax 调用。问题是它会调用每个输入的字母，所以我设置了这样的超时：

$(input).live('keyup', function(e){

setTimeout(function(){ 

var xx = $(input).val();
doSearch(xx); 

}, 400); 

}); 

它确实会等待 400 毫秒，但随后会为每个 keyup 执行。如何更改此设置以使 ajax 调用仅在最后一个输入字母后 400 毫秒左右“一次”？

（我过去使用了“延迟”，但这对我的脚本根本不起作用......）

Answer 1

timer = 0;
function mySearch (){ 
    var xx = $(input).val();
    doSearch(xx); 
}
$(input).live('keyup', function(e){
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(mySearch, 400); 
});

最好将你的函数移动到一个命名函数并多次调用它，因为否则你会在每个 keyup 上创建另一个 lambda 函数，这是不必要且相对昂贵的

Answer 2

每次按下新键时，您都需要重置计时器，例如

(function() {
    var timer = null;

    $(input).live('keyup', function(e) {
        timer = setTimeout(..., 400);
    });

    $(input).live('keydown', function(e) {
        clearTimeout(timer);
    });
)();

函数表达式用于确保timer变量的范围仅限于需要它的两个函数。

Answer 3

我认为你可以在这种情况下再次使用delay()，只要你可以在混合中添加一个新的临时“东西”。这对你有用吗？

$(input).live('keyup', function(e) {
    if (!$(input).hasClass("outRunningAJob")) {
        var xx = $(input).val();
        $(input).addClass("outRunningAJob");
        doSearch(xx);
        $(input).delay(400).queue(function() {
            $(this).removeClass("outRunningAJob");
            $(this).dequeue();
        });
    }
});

Answer 4

我发现以下更容易实现：

$(input).on('keyup', function () {
    delay(function () {
        if (input).val() !== '' && $(input).val() !== $(input).attr('searchString')) {
            // make the AJAX call at this time
            // Store the value sent so we can compare when JSON returns
            $(input).attr('searchString', $(input).val());

            namepicker2_Search_Prep(input);
        }
    }, 500);
});

通过存储当前字符串，您可以看到用户已停止输入。然后你可以安全地调用你的函数来做任何需要处理的事情。