Ожидание события click внутри цикла for - аналогично prompt () - PullRequest
Новая
       17

Ожидание события click внутри цикла for - аналогично prompt ()

0 голосов
/ 28 февраля 2019

Возможно, это не самый большой заголовок.Я пытаюсь понять функции обратного вызова, и мне было интересно, как можно добиться замены prompt () в следующем коде, не теряя цикл for? 

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 голосов
/ 28 февраля 2019

В зависимости от вашей конечной цели, я уверен, что есть лучший способ сделать это.Но ради этого:

Вы можете создать метод, который возвращает обещание, которое разрешается, когда происходит щелчок.Затем вы можете использовать async / await, чтобы сделать то, что вам нужно.

Используя Promise и await на нем, вы можете технически «приостановить» цикл 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 .

0 голосов
/ 28 февраля 2019

Для достижения: 

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);
...