Question

我想点击图库。由于我不知道画廊中有多少张照片，我想我需要一个while循环。当我到达最后一张图片时，下一张图片的按钮的类名称将更改为next-photo is-hidden，直到此为止只是next-photo。所以我的目标是要有一个while循环，当该按钮变为隐藏状态时，请从循环中退出，直到应该重复调用它为止。我现在站在这里：

async function openGallery(page) {
  await page.evaluate(async () => {
    const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
    let randomTime = 250;
    let clickOnImage = document.querySelector('div.image');
    let nextbutton = document.querySelector('button[class="next-photo"]');
    let closeGallery = document.querySelector('button[class="close-gallery"]');
    let lastImage = document.querySelector('button[class="next-photo is-hidden"]');
    if (clickOnImage) {
      clickOnImage.click();
    }
    while (nextbutton) {
      nextbutton.click();
      if (lastImage) {
        closeGallery.click();
        break;
      }
      await delay(randomTime);
    }
  });
}

但是现在，当我到达最后一张图片时，程序将不会中断，换句话说，此代码之后的其他代码将不会执行。画廊也不会关闭。

我想念什么？

Answer 1

您的主要问题可能是您只在完成所有点击之前搜索lastImage，这意味着它尚不存在。一种解决方法是将该行移至while循环内，但总的来说，您提供的所有代码看起来有些冗长。我可能会改用某种递归函数，类似于以下内容：

function updateContent() {
  setTimeout(function() {
      var button = document.getElementById('button');
      button.innerHTML = parseInt(button.innerHTML) + 1
      if (button.innerHTML === '5') {
          button.className = "unclickable"
          button.disabled = true
      } else {
          button.click()
      }
  }, 500)
}

<button id="button" class="clickable" onclick="updateContent()">1</button>

Answer 2

在添加lastImage类之前，您需要先设置一次is-hidden。一旦以后添加了is-hidden类，就没关系了，因为已经设置了lastImage。

您可以每次在lastImage = document.querySelector('button[class="next-photo is-hidden"]');之前再次执行if (lastImage) {。

出现DOM元素时如何从循环中爆发？

2 个答案: