如何延迟进一步的 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 添加到该列表并手动模拟击键...

这远非理想，但已经做了类似的事情来更有效地控制我们的下拉菜单......

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