JavaScript 异步（一）自动提示示列

浏览数：27 / 时间：2015年06月08日

大家都知道“自动提示”，看下面的一个示例代码：

<!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.0
				return 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);

效果如下：

但是问题来了，这段代码实现基本的需求是：每当我们输入一个字符的时候，就会触发“自动提示”，但这不是我们想要的预期结果。

我们预期的结果是：

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.0
				return 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);

效果图：

期望的效果是达到了，但是我们是否可以让它更完美呢？

接下来我们思考下面几个问题，