我是异步新手，也许只是不了解基础知识，但我试图通过调用弹出模式并等待用户提交数据的异步函数来等待来自 onclick 的用户输入。在找到一两个甚至提到使用异步等待页面事件的来源后，这对我的特定任务并不是特别有帮助......我想出了这个：
asnyc func1 (){
var userInput = await async2();
//do stuff with user input
}
async func2(){
//build modal content specific to task
//display modal
return new Promise(function(resolve,reject){
$(document).on('click', '#save-input', function(e){
var input = $('#input-data').val();
resolve(input);
});
});
}
一切似乎都正确调用，并且我得到了用户输入，但 func1 永远不会继续调用 async2。很明显，我错过了一些关键方面，但我似乎无法从我的来源中获取它。
回调不是一个选项，这里的代码有很多内容，我无法简短地详细说明，但上面描述的是我需要执行的基线功能。
简单片段
const timeout = async ms => new Promise(res => setTimeout(res, ms));
let next = false; // this is to be changed on user input
async function waitUserInput() {
while (next === false) await timeout(50); // pauses script
next = false; // reset var
}
用法示例使用 jQuery：
// just change the value of `next` for the script to continue
$('#user-input').click(() => next = true);
async function myFunc() {
// do stuff before
await waitUserInput(); // wait until user clicks
// do stuff after
}
myFunc() // launch function and start waiting for user input
请参阅这个工作演示
// this is an async timeout util
const timeout = async ms => new Promise(res => setTimeout(res, ms));
let next = false; // this is to be changed on user input
let n = 1;
async function waitUserInput() {
while (next === false) await timeout(50); // pause script but avoid browser to freeze ;)
next = false; // reset var
}
async function myFunc() {
$('#text').append(`* waiting user input...<br>`)
await waitUserInput();
$('#text').append(`* user has clicked ${n++} time(s)<br>`)
myFunc()
}
$('#user-input').click(() => next = true)
myFunc()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='user-input' style='padding:15px;color:white; background: tomato; border: 0; border-radius:8px; font-weight: bold'>CLICK ME !</button>
<div id='text'>
</div>
进一步改进
这个例子可以很容易地根据您的需要进行改进。例如变量next还可以用于存储用户输入值，并且 waitUserInput 返回该值。这将导致编写如下内容：
const userResponse = await waitUserInput(); // get user input value
// this is an async timeout util
const timeout = async ms => new Promise(res => setTimeout(res, ms));
let next = false; // this is to be changed on user input
async function waitUserInput() {
while (next === false) await timeout(50); // pause script but avoid browser to freeze ;)
const userInputVal = next;
next = false; // reset var
return userInputVal;
}
async function myFunc() {
$('#text').append(`* waiting user input...<br>`)
const userResponse = await waitUserInput();
$('#text').append(`* user choice is ${userResponse}<br>`)
myFunc()
}
$('#user-input').click(function() { next = $('#text-input').val() })
myFunc()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='text-input' type='text'/>
<button id='user-input' style='padding:15px;color:white; background: tomato; border: 0; border-radius:8px; font-weight: bold'>SUBMIT !</button>
<div id='text'>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
