要实现的功能很简单,输入时去请求数据,删到空时显示热门学校。
一开始我的想法挺简单
$("input").on("input", function() {
if (len == 0) { //len即搜索框中文字的长度
hotSchoolRender(); //热门学校渲染
} else {
// ajax请求
ajaxObj = $.ajax({
type: 'POST',
url: url,
data: data,
dataType: 'json',
success: function(result) {
searchSchoolRender(result); //对搜索到得学校进行渲染
},
error: function() {
...
}
})
}
})
这样输入慢点、删慢点没关系,但是如果是 打一个字、立刻删除,那就出问题了。
因为此时ajax还挂起在,而hotSchool已经被渲染出来了,等到ajax完成之后,又会做searchSchool的渲染,这样就事与愿违。
那怎么样避免这种情况呢?
中断请求
var ajaxObj;
$("input").on("input",function(){
if(len == 0){ //len即搜索框中文字的长度
ajaxObj.abort(); //中断上一个ajax请求
hotSchoolRender(); //热门学校渲染
}else{
// ajax请求
ajaxObj.abort(); //中断上一个ajax请求
ajaxObj = $.ajax({
type: 'POST',
url: url,
data: data,
dataType: 'json',
success: function(result) {
searchSchoolRender(result); //对搜索到得学校进行渲染
},
error: function(){
...
}
})
}
})
似乎搜索逻辑到此就完整了,然后兴高采烈的狂输一顿,哇擦,又出问题了~
请求过于猛烈,服务器招架不住了~
那这个时候怎么办呢?
延迟ajax请求
var ajaxObj;
var timeout = 0;
$("input").on("input",function(){
if(len == 0){ //len即搜索框中文字的长度
ajaxObj.abort(); //中断上一个ajax请求
hotSchoolRender(); //热门学校渲染
}else{
clearTimeout(timeout); //清除上次的计时器
timeout = setTimeout(function(){
// ajax请求
ajaxObj.abort(); //中断上一个ajax请求
ajaxObj = $.ajax({
type: 'POST',
url: url,
data: data,
dataType: 'json',
success: function(result) {
searchSchoolRender(result); //对搜索到得学校进行渲染
},
error: function(){
...
}
})
},500);
}
})
至于时间的话,自己DIY咯,END~
PS:主要讲思路,代码有误请见谅。I'm fresh man,请各位多指教