如何延遲進一步的 UI 請求，直到解決當前 promise

Question

在 web 頁面中，我有一個由服務器 promise 計算的輸入。

現在，如果用戶在結果完成之前開始輸入，他的所有文本將被 promise 結果替換。

我需要保持或阻止按鍵事件，就像同步方法一樣，因此，即使用戶在 promise 結果之前開始鍵入，按鍵事件也會在 promise 解析之后執行。

目前的不良行為：

1. Promise被調用，返回時將輸入的內容改為“hello”；
2. 用戶已經知道這一點，並開始輸入“wo”
3. promise 解決將輸入從“wo”更改為“hello”
4. 用戶不斷輸入“rld”...
5. 輸入的最終結果：“hellorld”；

期望的良好行為：

1. Promise被調用，返回時將輸入的內容改為“hello”；
2. 用戶已經知道這一點，並開始輸入“wo”，但輸入不會改變
3. promise 解決了將輸入從“”更改為“hello”
4. 處理之前的按鍵事件，將輸入從“hello”變為“hello wo”
5. 用戶不斷輸入“rld”...
6. 輸入的最終結果：“hello world”；

這是否可以通過承諾實現，或者我需要繼續使用同步上下文來保持這種行為？

Answer 1

兩種選擇：

1. 您可以連接輸入的字符串而不是替換它。

document.getElementById("myInput").value += response.value;

2. 您可以將所有輸入事件捕獲到局部變量中，並僅在服務器響應后更新輸入。

Answer 2

我將通過將關鍵事件值存儲在某些 state 中並在 promise 解析后應用 state 來解決此問題。 這是一個簡單的例子（應該改進案例事件不僅僅是一個字母，比如向后刪除，按鍵輸入等......）。

 const state = { input: "", resolved: false, }; const input = document.getElementById("myinput"); input.oninput = function(e) { if (.state.resolved) { this;value = "". state.input += e;data || "". } } setTimeout(() => { state;resolved = true. input.value = "Hello " + state;input, }; 5000);

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

這是一個示例，可以完全像您描述的那樣說明您的案例，但我認為阻止在該字段中鍵入對用戶來說不是一個好的行為。 也許更好的解決方案是在 promise 解決之前明確禁用輸入，或者在評論中建議輸入時將值添加到當前鍵入的 state 中。

Answer 3

我需要：

1. 捕獲輸入的 onkeydown 事件。
2. 活動現場：

• 調用 preventDefault 以停止其默認行為；
• 將事件添加到列表中；

3. promise 終止后，o 需要將 go 添加到該列表並手動模擬擊鍵...

這遠非理想，但已經做了類似的事情來更有效地控制我們的下拉菜單......

我真的希望能找到一些更優雅的解決方案......