jQuery keyup延迟

Question

希望这对于某人来说是一个快速而简单的方法.我使用大量的javascript/jquery相当新,我有以下设置从数据库中提取客户名称并在用户输入客户ID时显示它.

一切都很好,但它会搜索每个密钥.我知道我可以把它改成模糊,但是我希望它能够在延迟时进行搜索.

这是当前的代码:

function postData(){
    var id = $('#id').val();

    $.post('inc/repairs/events-backend.php',{id:id},   
        function(data){
        $("#display_customer").html(data);
    });
    return false;
}

$(function() {
    $("#id").bind('keyup',function() {postData()});
});

正如您所看到的那样,它绑定到每个keyup,这意味着如果您搜索得太快,可能会因为它仍然被加载而导致错误的结果.(即如果没有找到匹配项,则会显示错误,并且输入足够快会使用户需要退格并重新键入最后一个数字)

有人可以协助为现有代码添加延迟,并且如果可能的话,对您所做的更改进行一些小的解释,我不仅仅是在不理解的情况下进行复制和粘贴.

----编辑----

这是我完成的代码,谢谢你们!

function postData(){
    var id = $('#id').val();

    $.post('inc/repairs/events-backend.php',{id:id},   
        function(data){
        $("#display_customer").html(data);
    });
    return false;
}

$(function() {
    var timer;
    $("#id").bind('keyup input',function() {
        timer && clearTimeout(timer);
        timer = setTimeout(postData, 300);
    });
});

Answer 1

你应该研究setTimeout和clearTimeout功能:

$(function() {
    var timer;
    $("#id").on('keyup',function() {
        timer && clearTimeout(timer);
        timer = setTimeout(postData, 300);
    });
});

基本上我们正在做的是不是postData立即触发函数,而是将它传递给它setTimeout,以便在给定的时间(在这种情况下,300毫秒)之后触发它.

该setTimeout函数返回一个计时器ID,我们可以将其传递clearTimeout给取消该运行的调用.在每次按键时,在我们设置新计时器之前,我们首先检查是否有计时器设置.如果有,我们在开始新计时之前取消旧计时器.

为了进一步增强这一点,您还可以在每次按键时中止您的AJAX调用,以防用户在300+毫秒后输入内容(在计时器触发后,但在返回AJAX请求之前).

PS你应该查看Ben Alman的油门/去抖动插件,它可以在这里完美运行.

Answer 2

看看Underscore的debounce功能 - 它使这种行为非常简单:

$(function() {
  $('#id').on('keyup input', _.debounce(postData, 500))
}

这样一来,该呼叫postData的用户后才会发生停止打字的500ms(或任何你去抖动设置wait来)

另外,我在悄悄的input情况下赶上除了像按键复制/粘贴额外的变化(在现代浏览器)