入力要素火災変更イベントは特定の期間の後に1回のみ

Question

入力変更を特定の期間後に1回だけ実行したいと考えています。

以下のコードでは、3文字を入力すると1500ミリ秒後に3回警告します。

私は一度だけ警告したいと思います。

ここに私のjsコードです。

jQuery("#width").on('input',function(){ 
setTimeout(function(){ 
      alert('hello'); 
    },1500) 

}）;

JSFIDDEL

Answer 1

あなたはデバウンス機能が必要になります。どちらか使用lodash _.debounceまたはあなた自身の簡単なものを書く。そして、このようにそれを使用します。

jQuery("#width").on('input', debounce(function() { 
    alert('hello') 
}, 1500)) 

シンプルなデバウンス機能は次のようになります：

jQuery("#width").on('input', debounce(function() { 
 
    alert('hello'); 
 
}, 1500)); 
 

 
function debounce(callback, delay) { 
 
    var timeout 
 
    return function() { 
 
    var args = arguments 
 
    clearTimeout(timeout) 
 
    timeout = setTimeout(function() { 
 
     callback.apply(this, args) 
 
    }.bind(this), delay) 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" id="width" />