在自动完成上添加jQuery延迟

我正在尝试为应用程序创建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)); 

编辑：纠正错位的括号。