Как вырваться из цикла, когда появляется элемент DOM?

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) {.