<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>檢查用戶在文本框中是否是連續輸入的狀態</title>
<style type="text/css">
h3 {font-size:14px;color:#333333;font-weight:bold;}
body,div,input,ul,li,p {font-size:12px;color:#333333;}
div,ul,li,p {line-height:25px;}
li {list-style-type:none;}
</style>
</head>
<body>
<h3>檢查用戶在文本框中是否是連續輸入的狀態</h3>
<p>
需求：像百度百科的提問一樣，用戶在文本框中輸入文字的時候，實時的從服務端獲取標籤數據，並顯示到頁面上。<br />
我們需要避免頻繁的調用服務端的獲取標籤接口，需要檢測用戶是否爲連續輸入，只有在非連續輸入的時候，纔會去調用服務端的獲取標籤接口。
</p>
<p>
方案：使用 javascript 的window.setTimeout方法，延時調用服務端的接口，在延時的這一段時間內，如果用戶有輸入，則使用javascript的 window.clearTimeout 方法，取消上一次的調用。
</p>
<ul>
<li>源文：<textarea id="txtSrc" rows="5" cols="80">請輸入文字，1秒內的輸入爲連續輸入。</textarea>
</li>
<li>調試：<textarea id="txtInfo" rows="15" cols="80"></textarea></li>
</ul>
<script type="text/javascript">
var timerId = 0; // 全局變量用於標識是否延時執行keyup事件
// 檢查用戶輸入
// 原理：window.setTimeout 是延遲執行的，只要在 window.setTimeout 執行之前，把此執行取消（window.clearTimeout）掉就可以了。
function checkUserType() {
if (timerId) {
clearTimeout(timerId); // 如果 timerId 是存在，就清除此 timer。
timerId = 0;
}
//延時1000ms執行請求事件，如果感覺時間長了，就用合適的時間
//只要有輸入則不執行keyup事件
timerId = setTimeout(function(){
// 這裏面就是調用的請求，我這裏做了一個模擬。
// TODO: ajax method.
document.getElementById("txtInfo").value = document.getElementById("txtInfo").value + "\ntimerId=" + timerId + "，當前時間=" + new Date().getTime();
}, 1000);
}
(function() {
// 給輸入框 txtSrc 添加 keyup 事件。
document.getElementById("txtSrc").onkeyup = function(e) {
checkUserType();
};
}) ();
</script>
</body>
</html>
檢查用戶在文本框中是否是連續輸入的狀態
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章