javascript 如何在函数内部等待事件侦听器?

ergxz8rk  于 2022-12-25  发布在  Java
关注(0)|答案(4)|浏览(160)

我试图等待按钮被单击,然后再进入另一个函数。

async function foo() {
    // code before
    await ??? // wait for start button to be clicked before proceeding
    // code after
}

startButton.addEventListener("click", function() {
    return new Promise(); // ???
}, false);

如何在另一个函数中使用事件侦听器?

nom7f22z

nom7f22z1#

您在returnnew Promise()的关系上走对了路,您可以沿着以下思路做一些事情:

async function btnClick(btn) {
  return new Promise(resolve =>  btn.onclick = () => resolve());
}

然后在你的呼叫代码中

await btnClick(startButton);
b1payxdu

b1payxdu2#

您可以按如下方式继续操作:

// click the first button to begin the process
document.getElementById('beginbtn').addEventListener('click', function () {
  foo();
});

// foo
async function foo() {
  // hide the begin button
  document.getElementById('beginbtn').style.display = 'none';
  
  // show the pass button
  document.getElementById('passbtn').style.display = 'block';
  
  /******* FOCUS HERE ******/
  console.log('-- begin ... click "PASS" to continue -- ');
  await bar();
  console.log('-- end -- ');
  /******* FOCUS HERE ******/
  
  // show the begin button
  document.getElementById('beginbtn').style.display = 'block';
  
  // hide the pass button
  document.getElementById('passbtn').style.display = 'none';
}

// bar
function bar() {
  return new Promise(function (resolve, reject) {
    document.getElementById('passbtn').addEventListener('click', function () {
      console.log('clicked !!!');
      resolve();
    });
  });
}
<button id="beginbtn">CLICK TO BEGIN</button>
<button id="passbtn" style="display:none;">PASS</button>

两个按钮:开始和通过。首先显示开始按钮,隐藏通过按钮。一旦点击开始按钮,开始按钮启动foo()。然后进程开始,等待酒吧通过点击通过按钮(现在显示,而开始按钮隐藏)解决继续,直到结束。
希望能有所帮助!

hfyxw5xn

hfyxw5xn3#

你可以使用一个匿名函数并调用它自己。

await (async () => {
    return new Promise((res) => {
        btn.onclick= () => res(true);
    });
})();

像这样使用

async function foo() {

    await (async () => {
        return new Promise((res) => {
            btn.onclick= () => res(true);
        });
    })();
    
    //do whatever
}
f3temu5u

f3temu5u4#

你也许可以让它工作,但可能不应该。
有一个大的函数做事情,等待输入,然后做更多的事情是繁琐的,很难推理。
事件侦听器可以帮助您解决“等待用户输入”的问题,而不必为它而纠结代码。通过启动函数,然后等待事件侦听器触发,您可以取消该模式。
事实上,许多程序员认为必须创建链中的第一个Promise是一种“反模式”,这意味着它违背了良好实践的原则。但这里更大的问题是,这一个大函数的主体将如何在未来拖累您。
相反,试着将你的职能分开,例如:

function preInput(){
    //some setup tasks here
}

function postInput(){
    //some post-input tasks here
}

preInput(); // or elsewhere, depending on needs
startButton.addEventListener("click", postInput);

这在将来更容易遵循和添加。

相关问题