html5 input輸入即時偵測以及延時最佳化

這篇文章主要介紹了html5 input輸入即時偵測以及延時優化問題，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

有個項目是，這麼個狀況，輸入框，即時監測輸入，觸發請求。

第一個想法是input 上的onchange()方法，試了一下，不好用，是值等更改確認了，才會觸發，不即時。

上網查了一下，

$("#fix").on('input propertychange', function(event){
});

方法的確可以用，但是即時變更。發送的頻率有點快啊。

趕快加個定時器setTimeout.

$("#fix").on('input propertychange', function(event){
   setTimeout(function(){    //延迟0.5s执行
                   console.log($("#fix").val())
        },500);
});

問題又來了，定時器是異步，雖然延遲，但是還會執行，沒啥改變。

後來又想到解綁unbind，bind，但是解綁的時間裡取得不到鍵盤輸入的事件。

當時第一個想法是，觸發事件-刪除定時器-新增定時器-執行函數。發現還是不好，定時器刪不掉，乾脆就不執行了。

最後上網查了一下，發現一種新方法。

時間戳法。

原理就是，每次輸入修改全域變量，時間戳，延遲0.5s監測 新的​​時間戳和和綁定的時間戳相等，就進行下一步。

-----html-----

<input type="text" id="fix">
------script-----
var last;
$("#fix").on(&#39;input propertychange&#39;, function(event){
    //"#fix为你的输入框
       last = event.timeStamp;
       //利用event的timeStamp来标记时间，这样每次事件都会修改last的值，注意last必需为全局变量
       setTimeout(function(){    //设时延迟0.5s执行
            if(last-event.timeStamp==0)
               //如果时间差为0（也就是你停止输入0.5s之内都没有其它的keyup事件发生）则做你想要做的事
              {
                   console.log($("#fix").val())
               }
        },500);
});

總結

以上所述就是要介紹的html5 input輸入即時偵測以及縮時優化的全部內容，希望能對大家的學習有所幫助。更多相關教學請造訪Html5影片教學！

相關推薦：

php公益訓練影片教學

#HTML5圖文教學

HTML5線上手冊

以上是html5 input輸入即時偵測以及延時最佳化的詳細內容。更多資訊請關注PHP中文網其他相關文章！