个人需求：通过keyup事件配合后台elasticsearch（弹性搜索），用户在输入状态不发送请求，等停止输入后发送请求。

这是个思考笔记，因为项目临时需要弹性搜索功能，所以临时想了这么个法子，方法比较大众还望大神多多指点。

我的原文地址：http://www.cnblogs.com/mingxinice/p/keyupSearch.html

我用的原生方法，通过时间戳+定时器+一个全局变量实现。代码量很少比较易懂。

CSS:(记录一下比较喜欢的input样式)

 1 input{
 2     width:300px;
 3     height: 32px;
 4     color: #5c5c5c;
 5     font-size: 14px;
 6     box-sizing: border-box;
 7     border: 1px solid #ddd;
 8     border-radius: 3px;
 9     padding-left: 10px;
10 }
11 input:focus{
12     border: 1px solid #007cdc;
13     outline: none;
14     -webkit-box-shadow: 0px 0px 6px #007cdc;
15     -moz-box-shadow: 0px 0px 6px #007cdc;
16     box-shadow: 0px 0px 6px #007cdc;  
17     -webkit-transition: border linear .2s,box-shadow linear .2s;
18     -moz-transition: border linear .2s,box-shadow linear .2s;
19     -o-transition: border linear .2s,box-shadow linear .2s;
20     transition: border linear .2s,box-shadow linear .2s;
21 }

HTML：

1 <input id='keyDom' type="text"/>

JavaScript:

 1 var keyDom = document.getElementById('keyDom');
 2 //全局的一个变量，可被每次触发的事件函数重新修改赋值
 3 var lastTimeStamp = 0;
 4 keyDom.addEventListener('keyup',function(event){
 5     //标记当前事件函数的时间戳
 6     lastTimeStamp = event.timeStamp;
 7     //800ms后比较二者是否还相同（因为只要还有事件触发，lastTimeStamp就会被改写，不再是当前事件函数的时间戳）
 8     setTimeout(function(){
 9         if(lastTimeStamp == event.timeStamp){
10             alert('发送请求');
11         };
12     },800);
13 },false);

注释：

1.用户输入动作触发keyup事件，并调用事件函数。事件函数被调用后会生成对应的event.timeStamp，这个值在事件函数体内一直不会变。

2.将这个值复赋给全局中定义的lastTimeStamp。这个lastTimeStamp是一个全局的变量，这样这个值在每次事件触发时都会被改变。

3.如果在1000ms内，lastTimeStamp这个值被其他事件函数重新赋值修改，(同函数因触发事件被调用多次)则lastTimeStamp != event.timeStamp;说明还在输入。不走ajax请求。

4.若1000ms内不再触发事件，不再调用事件函数。

5.lastTimeStamp被本次事件函数赋值一次后，没有再被改写。则说明，此时不再输入或有间歇。lastTimeStamp==event.timeStamp。发送ajax请求。

功力不深，望老司机多留些方法~