我为我的网站创建了一个Facebook风格的ajax搜索,在您键入该内容时,它将在搜索下方的漂亮列表中显示搜索结果。
$("#s").keyup(function() { var searchbox = $(this).val(); var dataString = 's='+ searchbox; if(searchbox!='') { $.ajax({ type: "POST", url: "/livesearch.php", data: dataString, cache: false, success: function(html){ $("#display").html(html).show(); } }); } else {return false; } }); $("body").click(function() { $("#display").hide(); });
这样做的问题是,由于用户会键入一个单词,例如“ football”,因此效率低下。这将对服务器执行8个请求。有什么更有效的方法可以做到这一点?理想情况下,我认为它应该在进行搜索之前(而不是即时键入)存储请求1秒钟。但不是100%知道该怎么做…
您所指的方法称为“反跳”
我通常在所有脚本的底部都有一个“防弹跳”功能
var debounce=function(func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; };
然后,只要我做任何会受益于去抖的事情,我都可以通用地使用它
因此,您的代码将被重写为
$("#s").keyup(debounce(function() { var searchbox = $(this).val(); var dataString = 's='+ searchbox; if(searchbox!='') { $.ajax({ type: "POST", url: "/livesearch.php", data: dataString, cache: false, success: function(html){ $("#display").html(html).show(); } }); } else {return false; } } ,350 /*determines the delay in ms*/ ,false /*should it execute on first keyup event, or delay the first event until the value in ms specified above*/ ));