js实现ajax搜索的有趣逻辑

要实现的功能很简单，输入时去请求数据，删到空时显示热门学校。

一开始我的想法挺简单

$("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，请各位多指教