pause - How do I make the program wait for a button click to go to the next loop iteration in a method? [JavaScript]

Question

Closed. This question needs debugging details. It is not currently accepting answers. question from:https://stackoverflow.com/questions/65915371/how-do-i-make-the-program-wait-for-a-button-click-to-go-to-the-next-loop-iterati

Answer 1

A clean an simple way to do this is with Promises, and using async / await.

Basically make your button click into a promise resolver that your wait function can pass.

Example below.

let waitForPressResolve;

function waitForPress() {
    return new Promise(resolve => waitForPressResolve = resolve);
}

const btn = document.querySelector('button');

function btnResolver() {
  if (waitForPressResolve) waitForPressResolve();
}

async function doIt() {
  btn.addEventListener('click', btnResolver);
  for (let c = 1; c < 10; c += 1) {
    console.log(c);
    await waitForPress();
  }
  btn.removeEventListener('click', btnResolver);
  console.log('Finished');
}


doIt();

<button>Do Next</button>