首頁 > 開發者 > JavaScript
標籤：javascript javascript非同步 自動提示
大家都知道“自動提示”，看下面的一個範例程式碼：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Keyup Event</title></head><body><input type="text" id="autosuggestion" autocomplete="off" /><div></div><script src="keyPress.js"></script><script>var testCase = keyPress({id: ‘autosuggestion‘});</script></body></html>
看一下keyPress.js檔案
(function(exprots){var cnt = 0,callBack = function(){cnt++;if(console)console.log(‘您觸發了我‘ + cnt + ‘次‘);},keyPress = function(option){var elem = document.getElementById(option.id);addEvent(elem, ‘keyup‘, function(e){callBack();});},addEvent = (function(){return function(elm, evType, fn, useCapture){if (elm.addEventListener) {elm.addEventListener(evType, fn, useCapture);//DOM2.0return true;}else if (elm.attachEvent) {var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+return r;}else {elm[‘on‘ + evType] = fn;//DOM 0}};})();exprots.keyPress = keyPress;})(window);
效果如下：
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/5B/47/wKiom1UD8ziDFvPIAAFsFCa46LA251.jpg" style="float:left;" title="1.jpg" alt="wKiom1UD8ziDFvPIAAFsFCa46LA251.jpg" />
但是問題來了，這段代碼實現基本的需求是：每當我們輸入一個字元的時候，就會觸發“自動提示”，但這不是我們想要的預期結果。
我們預期的結果是：
1.當我們把一個關鍵字或關鍵句子輸入完畢以後，我們才觸發“自動提示”。
2.當我們連續刪除輸入框內容的時候，不觸發“自動提示”，直到我們停止刪除這個動作。
那麼我們應該用什麼樣的方法達到我們預期的結果呢？首先我們先來分析一下代碼邏輯：
1.每次當我們按下一個按鍵的時候，那麼代碼觸發“自動提示”，這段代碼是沒有邏輯問題。
2.那麼上面代碼邏輯是正確的，但是它的缺點是輸入和事件監聽是同步的。
舉個例子如下：
我們想輸入完整的“我愛你”，然後再觸發“自動提示”。
我們可以嘗試用setTimeout函數延時，即當上一個輸入完成後，可以讓它延時執行。
這樣就實現延時效果了，但是不足的是：按了多少次，還是要執行多少次，只不過每隔一段時間執行罷了。
然而這並不是我們期望的效果，我們想要是在最後輸入“你”的時候執行“自動提示”。怎麼辦？可以採用下面的clearTimeout函數.
看一下keyPress.improve.js檔案
(function(exprots){var cnt = 0,currentThread = null,delay = 300,callBack = function(){cnt++;if(console)console.log(‘您觸發了我‘ + cnt + ‘次‘);},keyPress = function(option){var elem = document.getElementById(option.id);addEvent(elem, ‘keyup‘, function(e){clearTimeout(currentThread);//清除上一次操作currentThread = setTimeout(function(){callBack();}, delay);//進入排隊狀態});},addEvent = (function(){return function(elm, evType, fn, useCapture){if (elm.addEventListener) {elm.addEventListener(evType, fn, useCapture);//DOM2.0return true;}else if (elm.attachEvent) {var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+return r;}else {elm[‘on‘ + evType] = fn;//DOM 0}};})();exprots.keyPress = keyPress;})(window);
：
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/5B/47/wKiom1UD9NvigdP3AAEXIUmL8VI708.jpg" title="2.jpg" alt="wKiom1UD9NvigdP3AAEXIUmL8VI708.jpg" />
期望的效果是達到了，但是我們是否可以讓它更完美呢？
接下來我們思考下面幾個問題，
我們是不是可以去掉有些不符合輸入的索引值呢？
我們是不是可以加入有些按鍵組合值呢？
關於上面的問題，我們下次在討論研究。
本文出自 “shoppa” 部落格，謝絕轉載！
JavaScript 非同步（一） 自動提示示列
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
