我这里有这段代码。它工作得很好，但如果我打得太快，就会锁定。我喜欢看看如何改进它。它将搜索 MySql 表，并根据许多列中的条件返回结果。
<script src="jquery-v2.0.3.js"></script>
<script type='text/javascript'>
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
delay(function(){
//alert('Time elapsed!');
}, 1000 );
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("findcourses.php", {search_term : search_val}, function(data) {
if (data.length>0){
$("#search_results").html(data);
}
})
}
我看到的几件事 -
首先，e.preventDefault() 在 keyup 事件中不执行任何操作。 无论您期望做什么都不起作用，但它适用于键控事件。
然后就在这里：
$("#search_term").keyup(function(e){
delay(function(){
//alert('Time elapsed!');
}, 1000 );
e.preventDefault();
ajax_search();
});
您正在调用延迟函数，然后立即调用ajax_search() 。 搜索是在延迟功能之后进行的，但它不会等待。 ajax_search()需要在您的回调中
$("#search_term").keyup(function(e){
delay(function(){
ajax_search();
}, 1000 );
});
你的延迟是正确的，但它应该以不同的方式实现。现在，它在 keyup 触发器后等待一秒钟，然后运行 ajax 调用 - 它最终仍然每次击键调用 ajax。这可能是主要的拖累。（杰夫在另一个答案中指出; 它实际上根本不等待第二个，因为 ajax 函数调用在延迟函数之外）
相反，不要为延迟而烦恼（除非它具有不同的功能），而是执行简单的if_in_ajax布尔检查。例如-
var if_in_ajax = false,
do_ajax_anyways = false;
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
if ( !if_in_ajax || do_ajax_anyways ) {
$.post("findcourses.php", {search_term : search_val}, function(data) {
// Now ajax call is running
if_in_ajax = true;
if (data.length>0){
$("#search_results").html(data);
}
})
.always(function() {
// After the post call is finished, we're done in ajax
if_in_ajax = do_ajax_anyways = false;
});
}
}
如果您可以合理地确保 ajax 调用只需要一秒钟，请随时保留延迟。通过上面的额外检查，您应该避免大多数滞后问题。
$("#search_term").keyup(function(e){
delay(function(){
ajax_search();
}, 1000 );
});
可能更好的是，在模糊上调用ajax搜索（即当他们离开输入时）。也许在输入旁边添加一个搜索图标，他们需要单击框才能进行搜索的提示。
$("#search_term").blur(function(e){
do_ajax_anyways = true;
ajax_search();
});