Подождите, пока элемент загрузит javascript [дубликат]

avatar
tarun14110
8 августа 2021 в 18:35
732
1
0

Я взаимодействую с веб-страницей через расширение Chrome. Я хочу дождаться появления элемента (например, всплывающего окна), прежде чем продолжить взаимодействие. Я хочу остановить выполнение функции до тех пор, пока не появится элемент, потому что я взаимодействую в последовательном потоке. Ниже приведен пример функции, которую я создал. Эта функция не работает должным образом. Он задерживает только первую итерацию цикла, а остальные итерации цикла выполняются мгновенно. Итак, максимальное время ожидания этой функции на данный момент составляет 100 мс. Как я могу исправить эту функцию или определить элегантный способ ожидания.

function waitUntilElementLoad(elem,  maxWaitInSec) {
    for (let i = 0; i < maxWaitInSec *10; i++) {
        if(elem) { return true;}
        setTimeout(() => {console.log(i);}, 100);
      }
      return false;
}

Попытка2: (Отработка комментариев и ответов)

async function waitUntilElementLoad(elem,  maxWait) {
    for (let i = 0; i < maxWait*10; i++) {
        if(elem) { return true;}
        console.log(i);
        await timer(100); // then the created Promise can be awaited
    }
    return false;
}


 if (await waitUntilElementLoad(popUpElemNextButton, 5)) {
            console.log("Popup button appeared")
 } else {
            console.log("Popup button not appeared")
 }

Функция waitUntilElementLoad возвращает false, даже если элементы загружаются за 1 секунду, а время ожидания составляет 5 секунд. Если элемент уже существует до вызова функции. он возвращает истину. Может ли быть так, что функция не получает обновленный DOM во время своей обработки? Есть ли способ справиться с этим?

Источник
Felix Kling
8 августа 2021 в 18:50
1

Возможно, на самом деле вам следует зарегистрировать наблюдателя мутаций. Расширение Chrome: ожидание загрузки элемента (асинхронный js)

Ответы (1)

avatar
Unmitigated
8 августа 2021 в 19:55
0

Вместо использования цикла просто вызовите setTimeout, если элемент не найден.

function waitUntilElementLoad(selector,  delay) {
    if(document.querySelector(selector) != null){
        // element found; do something
    } else setTimeout(()=>waitUntilElementLoad(selector, delay), delay);
}
The Fool
8 августа 2021 в 20:03
0

Это своего рода хаки.

Cully
8 августа 2021 в 20:11
0

Голосование не лучшее решение этой проблемы. MutationObserver — гораздо лучший вариант.