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

Question

This might not have the greatest title. I'm trying to understand call back functions, and I was wondering how replacing prompt() in the following code could be achieved, without losing the for loop?

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

I've tried something like:

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();
}

I know this can be done without the for loop, I'm more curious if callbacks could be able to pause the loop and wait for input?

Answer 1

Depending on what your end goal is, I'm pretty sure there's a better way to do it. But for the sake of doing that:

You can create a method that returns a promise that resolves when a click happens. Then you can use async / await to do what you need.

By using a Promise and await ing on it, you can technically "pause" your for loop until something happens. In this case, a click.

Remember the method that encloses the for loop has to be 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();

Try it in this plunkr .

Answer 2

To acheieve:

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

you can use recursion:

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

and use it like so:

promptLoop(4);

---

Your second scenario is different, and can be adapted like so:

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

Your function would then take a next callback, like so:

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

loop(3, toBeLooped);