【JQuery】使用keyup來做關鍵字搜尋，延遲一段時間再做搜尋

發表於 | | 閱讀次數:

前言

一開始在做搜尋輸入時，如果直接使用$(‘input’).keyup(function()的方式，
會產生一個使用者關鍵字還沒輸入完，但搜尋已經在跑了，
例如你想搜尋’logdown’，當按下’l’開始，他就已經跑過一次搜尋，
如果背後搜尋資料很大量的話，很容易有效能問題，

 

setTimeout()

一個簡單的方式，用javascript的setTimeout來製造這個延遲，
當使用者輸入第一個字時，那就設一個timeout變數給他，
每當使用者輸入完資料，都會先等待這個延遲時間，

如果使用者繼續輸入資料，那就把舊延遲清除，換上新延遲，
如果使用者已經輸入完畢，那延遲時間後才會開始搜尋，

1
2
3
4
5
6
7
8
9
10
11
12
var search_Timeout; //先初始化一個timeout變數

$input.keyup(function(){
	var searchFunction = function() {
		// 利用$input.val()當關鍵字搜尋
	};
    
	if(search_Timeout) {
		clearTimeout(search_Timeout);
	}
	search_Timeout = setTimeout(searchFunction, 1000);
});

 

結語

這種方式可以簡單地避免keyup時就跑一次搜尋的問題
以上面的一秒鐘為例，在延遲的一秒內輸入完Jquery這個關鍵字，那就會只執行一次關鍵字為Jquery的搜尋