如何反彈使用異步/等待？

Question

我有一個輸入框。用戶停止輸入後，我想執行HTTP請求並等待結果。

Here's a jsbin

由於網絡請求不允許在jsbin，我用setTimeout()代替。

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); 

然而，當我在框中鍵入「做搜索」立即出現的每一個字符 - 我希望它只是出現在500毫秒後已過期。

如何使用去抖動並等待？

Answer 1

的問題是，在最後一行：

}), 500); 

指定時間爭吵後應先關閉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>