async/awaitを使用してデバウンスするにはどうすればよいですか？

Question

私は入力ボックスを持っています。ユーザーが入力を停止した後、HTTPリクエストを実行して結果を待っています。

Here's a jsbin

ネットワーク要求がjsbin上で許可されていないので、私が代わりにsetTimeout()を使用しました。私は500ミリ秒の有効期限が切れた後に、それだけ表示したい -

しかし

var log = console.log.bind(console) 

var delayedResults = new Promise(function(resolve) { 
    setTimeout(function(){ 
    resolve('Wooo I am the result!') 
    }, 3000); 
}); 

document.querySelector('input').addEventListener('input', _.debounce(async function(){ 
    log('Doing search') 
    var result = await delayedResults 
    log('Result is', result) 
}), 500); 

私はボックスに入力し、「検索を行うには、」すぐにすべての文字を表示されます。

どうすればdebounceとawaitを使用できますか？

Answer 1

問題は、最後の行にあった：

}), 500); 

time引数を指定した後にあなたがdebounce関数呼び出しを閉じる必要があります：微妙な

}, 500)); 

var log = console.log.bind(console) 
 

 
    var delayedResults = new Promise(function(resolve) { 
 
    setTimeout(function(){ 
 
     resolve('Wooo I am the result!') 
 
    }, 3000); 
 
    }); 
 

 
    document.querySelector('input').addEventListener('keydown', _.debounce(async function(){ 
 
    log('Doing search') 
 
    var result = await delayedResults; 
 
    log('Result is', result) 
 
    }, 500));

<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script> 
 
<input>