Javascript Promise + setInterval отслеживаем появление элемента на странице

Часто бывает нужно отследить появление html элементов на странице. Стоит заметить, что использовать такой метод, нужно тогда, и лишь тогда, когда это невозможно сделать по событиям. Обычно события есть у всего. Но какое то стороннее api или скрипт/плагин может не предоставлять таких событий, либо долго ковыряться в его документации, которая написана кривыми мозгами. В этом случае навернем свой маленький прослушиватель:

new Promise((resolve, reject) => {
    let id = setInterval(() => {
        if ($('#target-element').length) {
            clearInterval(id);
            resolve($('#target-element'));
        }
    }, 50);
}).then((target) => {
    target.text('У меня теперь другой текст!');
});

Предположим #target-element — это некая кнопка, при её появлении, мы заменим её текст практически мгновенно. Тут надо заметить, что элемент может и не появиться, в этом случае, если это критично, мы можем ограничить количество итераций каким то числом и подсчитывать их, а при достижении кол-ва попыток найти элемент, вызовем clearInterval и reject.

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *