我为我的网站创建了一个 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% 确定该怎么做...
最佳答案
您所指的方法称为“去抖动”
我通常在所有脚本的底部都有一个“Debounce”功能
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*/
));
关于javascript - Facebook 样式 AJAX 搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1568312/