在执行点击之前，如何循环运行代码？

Question

我正在尝试在我的国家/地区预订疫苗。此代码应用过滤器，然后在有疫苗可用时单击插槽。

前 3 行选择过滤器，最后一行点击可用插槽。

document.querySelector('.pin-search-btn.district-search.md.button.button-solid.ion-activatable.ion-focusable.hydrated').click()
setTimeout(() => {
  document.querySelector('#c1').click()
}, 1000);
setTimeout(() => {
  document.querySelector('#c5').click()
  document.querySelectorAll('.vaccine-box').forEach(function(item) {
    if (item.getElementsByTagName('a')[0].innerHTML !== ' Booked ' && item.getElementsByTagName('a')[0].innerHTML !== ' NA ') {
      item.getElementsByTagName('a')[0].click()
    }
  })
}, 2000);

<-- html needed -->

我想在 2 秒的时间间隔内循环运行此代码，直到执行最终点击。 item.getElementsByTagName('a')[0].click()

P.S：我在 Chrome 上的开发者工具中运行此程序，我不知道该信息是否与此处相关。

Answer 1

直观地说，我建议保留一个布尔值hasClickedSlot = false，一旦点击了一个插槽，你就会更新它。在再调用setTimeout 2 秒之前，请确保!hasClickedSlot 仍然存在。

这可能看起来像：

let hasClickedSlot = false;

function clickButton() {
  document.querySelector('.pin-search-btn.district-search.md.button.button-solid.ion-activatable.ion-focusable.hydrated').click();
  
  // after 1 second, click on the C1 button
  setTimeout(clickC1, 1000);
}

function clickC1() {
  document.querySelector('#c1').click();
  
  // after 2 seconds, try to click on a slot
  setTimeout(tryClickSlot, 2000);
}


function tryClickSlot() {
  document.querySelector('#c5').click();
  document.querySelectorAll('.vaccine-box').forEach(function(item) {
    if (item.getElementsByTagName('a')[0].innerHTML !== ' Booked ' && item.getElementsByTagName('a')[0].innerHTML !== ' NA ') {
      item.getElementsByTagName('a')[0].click()
      hasClickedSlot = true;
    }
  });

  // if no slot was clicked yet, do it again
  if (!hasClickedSlot) {
    clickButton();
  }
}

// start the process
clickButton();

这段代码的缺点是构建了一个调用堆栈，因为函数不会返回而是继续堆叠。

编辑：由于函数在调用 setTimeout 后返回，因此没有构建堆栈调用（例如在递归期间）。