如何延迟进一步的 UI 请求，直到解决当前 promise
[英]How to delay further UI requests until current promise is resolved
问题描述
在 web 页面中，我有一个由服务器 promise 计算的输入。
现在，如果用户在结果完成之前开始输入，他的所有文本将被 promise 结果替换。
我需要保持或阻止按键事件，就像同步方法一样，因此，即使用户在 promise 结果之前开始键入，按键事件也会在 promise 解析之后执行。
目前的不良行为：
- Promise被调用，返回时将输入的内容改为“hello”；
- 用户已经知道这一点，并开始输入“wo”
- promise 解决将输入从“wo”更改为“hello”
- 用户不断输入“rld”...
- 输入的最终结果：“hellorld”；
期望的良好行为：
- Promise被调用，返回时将输入的内容改为“hello”；
- 用户已经知道这一点，并开始输入“wo”，但输入不会改变
- promise 解决了将输入从“”更改为“hello”
- 处理之前的按键事件，将输入从“hello”变为“hello wo”
- 用户不断输入“rld”...
- 输入的最终结果：“hello world”；
这是否可以通过承诺实现，或者我需要继续使用同步上下文来保持这种行为？
3 条回复
1楼 Denis Liger 0 2023-06-06 19:39:39
两种选择：
- 您可以连接输入的字符串而不是替换它。
document.getElementById("myInput").value += response.value;
- 您可以将所有输入事件捕获到局部变量中，并仅在服务器响应后更新输入。
2楼 Peterrabbit 0 2023-06-06 19:52:08
我将通过将关键事件值存储在某些 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 中。
3楼 Everton Elvio Koser 0 2023-06-07 13:44:49
我需要：
- 捕获输入的 onkeydown 事件。
- 活动现场：
- 调用 preventDefault 以停止其默认行为；
- 将事件添加到列表中；
- promise 终止后，o 需要将 go 添加到该列表并手动模拟击键...
这远非理想，但已经做了类似的事情来更有效地控制我们的下拉菜单......
我真的希望能找到一些更优雅的解决方案......
问题未解决？试试以下方法：
如何使摩卡咖啡中的“ it”等到“ it”中的承诺得到解决？
[英]How to make the “it” in mocha to wait until the promise within “it” gets resolved?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.