暂停 foreach 循环 unitl 事件发生，之后循环继续（JavaScript）

Question

forEach 循环遍历数组并执行特定操作。但是，当它到达“b”时，预计会暂停，之后可以继续，直到按下按钮。该按钮不应直接重新激活循环，而是在继续之前必须发生的事件。具体来说，当按下按钮'b'时，它的值变成'c'，这将使循环继续。因此，重要的是，在按下按钮之前，循环不会处理后面的元素。你会如何把它放在 forEach 循环中？array.forEach(item => {  if (item == 'a') {    console.log(item)  }  if (item == 'b') {    pause until button is pressed, and only then continue with the next step  }  })

Answer 1

解决这个问题的一种方法，而不是依赖于递归，是简单地await在本机for循环内使用（Array.prototype.forEach不允许在其中进行异步操作）。这样，当您的项目是 时b，您只需等待某个事件（例如按下按钮），这将解决承诺并允许循环继续。伪代码明智，它看起来像这样：

for (let i = 0; i < arr.length; i++) {

  const item = arr[i];

  if (item === 'b') {

    await waitForButtonClick();

  }

  console.log(item);

}

当然，对于上述工作，您需要将其包装在一个async函数中......直到JS 赶上以允许顶级等待；）

预计waitForButtonClick()将返回一个承诺。例如，在按钮点击内部，您可以等待点击事件触发，然后再解析承诺：

function waitForButtonClick() {

  const btn = document.getElementById('btn');

  return new Promise(resolve => {

    btn.addEventListener('click', resolve);

  });

}

请参阅下面的概念验证：

const arr = ['a', 'b', 'c', 'd', 'e'];

async function processArray() {

  for (let i = 0; i < arr.length; i++) {

    const item = arr[i];

    

    if (item === 'b') {

      console.log('Encoutered b, waiting for button click');

      await waitForButtonClick();

      console.log('Ok, now we can continue');

    }

    console.log(item);

  }

}

function waitForButtonClick() {

  const btn = document.getElementById('btn');

  return new Promise(resolve => {

    btn.addEventListener('click', resolve);

  });

}

// Process array

processArray();

<button type="button" id="btn">Click to confirm <code>b</code></button>