使用异步函数等待来自 onclick 的用户输入

Question

我是 async 的新手，也许只是没有深入了解基础知识，但我试图通过调用一个弹出模式并等待用户提交数据的异步函数来等待来自 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 的调用。所以显然我错过了这方面的一些关键方面，但我似乎无法从我的来源中提取它。

回调不是一个选项，这里的代码比我能详细说明的要多得多，但上面描述的是我需要执行的基线功能。

Answer 1

我搜索了很多，但什么也没找到，只有这个问题。 而且我想要一些异步的东西而不依赖循环来检查，所以我做了一个不同的解决方案。

主要问题是使用事件侦听器解决 Promise，因此我在 Promise 中创建了 eventListener 函数，并使用箭头函数来获取 Promise 的上下文。然后我解决承诺并在第一次单击后取消 eventListener。

为了让任何监听器都可以重用一个函数，我也为此添加了一个条目。

function waitListener(element, listenerName) {
    return new Promise(function (resolve, reject) {
        var listener = event => {
            element.removeEventListener(listenerName, listener);
            resolve(event);
        };
        element.addEventListener(listenerName, listener);
    });
}

如果您想将它用于某事，它将返回该事件。 这使您更容易以有序的方式编写一些代码序列。但是要工作，它必须在一个异步函数内部，这意味着这个函数将开始并行运行，所以知道你要从哪里开始很重要，以免妨碍你的进程。

在一些异步函数中的简单使用：

var element = document.querySelector("button");
await waitListener(element,"click");

完整示例：

function waitListener(Element, ListenerName) {
    return new Promise(function (resolve, reject) {
        var listener = event => {
            Element.removeEventListener(ListenerName, listener);
            resolve(event);
        };
        Element.addEventListener(ListenerName, listener);
    });
}


async function awaitClicks(){

var element = document.querySelector("button");


await waitListener(element,"click")
// Do thing 1
.then(e=>{
    console.log("e.clientX: "+e.clientX);
});
console.log(1);


await waitListener(element,"click");
// Do thing 2
console.log(2);


await waitListener(element,"click");
// Do thing 3
console.log(3);

    
}
awaitClicks();

<button>click</button>

如果您希望每次单击按钮时都发生相同的事情，最好只使用一个addEventListener。根据您要执行的操作，您可以使用 addEventListener 并在它使用removeEventListener 执行的函数中取消它。现在，如果你想做一些依赖于事件顺序的事情，也许使用这个函数可能是一个很好的解决方案。

Answer 2

简单的sn-p

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>