Question

我正在尝试为应用程序创建jQuery自动完成：

$("#search-input").on('keyup', function() {
    search = $(this).val();
    autocomplete_div = $(".autocomplete")
    $.get('/ajax/search/', {'search': search,}, function(response){
        autocomplete_div.html(response)
    });
});

我需要在上面的代码中添加400毫秒的延迟？

Answer 1

使用

setTimeout(function() {
    // your code here
}, 400);

setTimeout是浏览器的window对象提供的方法。

如果已使用clearTimeout设置，取消计时器的更完整示例将是：

var myTimer = 0;

$("#search-input").on('keydown', function() {
    search = $(this).val();

    // cancel any previously-set timer
    if (myTimer) {
        clearTimeout(myTimer);
    }

    myTimer = setTimeout(function() {
        autocomplete_div = $(".autocomplete")
        $.get('/ajax/search/', {'search': search,}, function(response){
            autocomplete_div.html(response)
        });
    }, 400);
});

另请注意，请使用on代替弃用的live。

Answer 2

您的代码应如下所示:(对于jQuery 1.7 +）

$(document).on('keyup', "#search-input", function () {
    clearTimeout($(this).data('timeout'));
    var _self = this;
    $(this).data('timeout', setTimeout(function () {
        $.get('/ajax/search/', {
            search: _self.value
        }, function (response) {
            $(".autocomplete").html(response);
        });
    }, 400));
});

如果使用较旧的jQuery版本，请使用live()或更好delegate()。顺便说一下，你应该将它绑定到最近的静态容器，而不是document。

Answer 3

您可以使用setTimeout（）函数来延迟表达式的开始，在本例中是您的函数。请注意，这不会延迟超出此代码的处理。它只会延迟这个函数的启动，同时继续在函数之后处理代码。

$("#search-input").live('keydown', setTimeout(function() {
    search = $(this).val();
    autocomplete_div = $(".autocomplete")
    $.get('/ajax/search/', {'search': search,}, function(response){
        autocomplete_div.html(response)
    })
},400));

编辑：纠正错位的括号。

在自动完成上添加jQuery延迟

3 个答案: