－、雖然Jquery已經有了一個完整的包 實現前端搜索聯想功能，但是出於學習還是想了解一下實現此功能的原理性
回想起來 實現此功能很簡單，1.前端輸入字符串 文本改變 異步請求服務器 將返回的資料顯示在前端就OK了
實際上這樣沒有問題但是性能卻大大減少了很多，那么為了優化性能 此處做了一個時間間隔 當用戶輸入字符之間停頓一定時間后去請求資料
看看實現代碼吧
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Jquery聯想時間間隔實現原理</title>
</head>
<body>
<input type="text" id="search" placeholder="搜索" />
</body>
<script>
function RequestAjax(text){
console.log("測試：" + text);
}
var input = document.getElementById("search");
input.addEventListener("keyup", function(event){
throttle(RequestAjax, null, 1000, this.value,1000);
});
function throttle(fn,context,delay,text,mustApplyTime){
clearTimeout(fn.timer);//清楚當前定時器
/*當需求要求兩次文本輸入時間超過規定時間 執行一次取消注釋 否則*/
/*fn._cur=Date.now(); //記錄當前時間
if(!fn._start){ //若該函數是第一次調用，則直接設置_start,即開始時間否則為_cur，即此刻的時間
fn._start=fn._cur;
}
if(fn._cur-fn._start>mustApplyTime){
//當前時間與上一次函數被執行的時間作差，與mustApplyTime比較，若大於，則必須執行一次函數，若小於，則重新設置計時器
fn.call(context,text);
fn._start=undefined;
}else{*/
fn.timer=setTimeout(function(){
fn.call(context,text+"調用服務器");
},delay);
/*fn._start=fn._cur;
}*/
}
</script>
</html>
執行特效：
