等待for循环内的click事件-与提示符()相似

时间:2019-02-28 00:49:29

标签: javascript for-loop prompt

此标题可能不大。我试图了解回调函数,并且想知道如何在不丢失for循环的情况下实现以下代码中的hint()替换?

for(i=0;i<4;i++){
  let x = prompt("Input an integer");
  // store input into an array
}

我尝试过类似的事情:

for(let i = 0; i<4; i++){
  let x = document.getElementById("someId");
  x.addEventListener("click", rcvInput(function(i){
    if(i == 3){
      x.removeEventListener("click", rcvInput)
    }
  }));
}
function rcvInput(callback){
  //store input into an array
  callback();
}

我知道这可以在没有for循环的情况下完成,我很好奇回调函数是否能够暂停循环并等待输入?

2 个答案:

答案 0 :(得分:1)

根据您的最终目标,我很确定有更好的方法来做到这一点。但是为了做到这一点:

您可以创建一个返回承诺的方法,该承诺将在单击发生时解决。然后,您可以使用async / await来完成所需的工作。

通过在其上使用Promiseawait,您可以从技术上“暂停” for循环,直到发生某些情况为止。在这种情况下,请单击。

请记住,包围for循环的方法必须为async

function getClick() {
  return new Promise(acc => {
    function handleClick() {
      document.removeEventListener('click', handleClick);
      acc();
    }
    document.addEventListener('click', handleClick);
  });
}


async function main() {
  for (let i=0;i<4;i++) {
    console.log("waiting for a click", i);
    await getClick();
    console.log("click received", i);
  }
  console.log("done");
}

main();

在此plunkr中尝试。

答案 1 :(得分:0)

要实现:

for(var i=0;i<4;i++){
  let x = prompt("Input an integer"); // WAIT FOR PROMPT
  // ...
  // LOOP CODE AFTER PROMPT
}

您可以使用递归:

function promptLoop(count){
    let x =  prompt("Input an integer");
    // ...
    // LOOP CODE AFTER PROMPT
    if (count > 0) promptLoop(count - 1)
}

并像这样使用它:

promptLoop(4);

您的第二种情况不同,可以像这样进行调整:

function loop(count, method) {
    if (count > 0) method(() => loop(count - 1, method), count);
}

您的函数随后将进行下一个回调,如下所示:

function toBeLooped(next){
    // do stuff
    next() // continues loop 
}

loop(3, toBeLooped);