如何让程序等待按钮单击以转到方法中的下一个循环迭代？ [JavaScript]

问题描述

我制作了一个包含许多循环的算法，我正在尝试通过单击按钮来逐步完成它。我需要能够在我第一次单击按钮时只执行一次循环迭代，然后在我再次单击它时执行下一次迭代，依此类推，直到程序完成。我可以使用 JavaScript 来实现吗？如果是这样，如何？

解决方法

一个干净简单的方法是使用 Promises，并使用 async/await。

基本上让你的按钮点击进入你的等待函数可以通过的承诺解析器。

示例如下。

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>