DOM元素出现时如何跳出循环？答案

【问题标题】：How to break out from loop when a DOM element appears?DOM元素出现时如何跳出循环？
【发布时间】：2019-04-16 08:48:47
【问题描述】：

我想点击一个画廊。由于我不知道画廊中有多少张图片，我想我需要一个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);
    }
  });
}

但是现在，当我到达最后一张图片时，程序不会跳出循环，或者换句话说，这之后的其他代码不会执行。画廊不会关闭。

我错过了什么？

【问题讨论】：

标签： javascript node.js loops puppeteer

【解决方案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)
}

&lt;button id="button" class="clickable" onclick="updateContent()"&gt;1&lt;/button&gt;

【讨论】：

【解决方案2】：

在添加is-hidden 类之前，您在开头设置了一次lastImage。稍后添加 is-hidden 类后就没有关系了，因为 lastImage 已经设置好了。

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

【讨论】：