JavaScript實現搜索聯想功能


-、雖然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>

執行特效:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM