keyup实现在输入状态不发送搜索请求，停止输入后发送

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

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

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

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

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

 input{
     width:300px;
     height: 32px;
     color: #5c5c5c;
     font-size: 14px;
     box-sizing: border-box;
     border: 1px solid #ddd;
     border-radius: 3px;
     padding-left: 10px;
 }
 input:focus{
     border: 1px solid #007cdc;
     outline: none;
     -webkit-box-shadow: 0px 0px 6px #007cdc;
     -moz-box-shadow: 0px 0px 6px #007cdc;
     box-shadow: 0px 0px 6px #007cdc;
     -webkit-transition: border linear .2s,box-shadow linear .2s;
     -moz-transition: border linear .2s,box-shadow linear .2s;
     -o-transition: border linear .2s,box-shadow linear .2s;
     transition: border linear .2s,box-shadow linear .2s;
 }

HTML：

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

JavaScript:

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

注释：

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

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

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

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

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

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