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請求。

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