暂停 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++) {&nbsp; const item = arr[i];&nbsp; if (item === 'b') {&nbsp; &nbsp; await waitForButtonClick();&nbsp; }&nbsp; console.log(item);}当然，对于上述工作，您需要将其包装在一个async函数中......直到JS 赶上以允许顶级等待；）预计waitForButtonClick()将返回一个承诺。例如，在按钮点击内部，您可以等待点击事件触发，然后再解析承诺：function waitForButtonClick() {&nbsp; const btn = document.getElementById('btn');&nbsp; return new Promise(resolve => {&nbsp; &nbsp; btn.addEventListener('click', resolve);&nbsp; });}请参阅下面的概念验证：const arr = ['a', 'b', 'c', 'd', 'e'];async function processArray() {&nbsp; for (let i = 0; i < arr.length; i++) {&nbsp; &nbsp; const item = arr[i];&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if (item === 'b') {&nbsp; &nbsp; &nbsp; console.log('Encoutered b, waiting for button click');&nbsp; &nbsp; &nbsp; await waitForButtonClick();&nbsp; &nbsp; &nbsp; console.log('Ok, now we can continue');&nbsp; &nbsp; }&nbsp; &nbsp; console.log(item);&nbsp; }}function waitForButtonClick() {&nbsp; const btn = document.getElementById('btn');&nbsp; return new Promise(resolve => {&nbsp; &nbsp; btn.addEventListener('click', resolve);&nbsp; });}// Process arrayprocessArray();<button type="button" id="btn">Click to confirm <code>b</code></button>