Как правильно установить setTimeout() в расширении для хрома?

Question

[Nikita M.]

Добрый день.
Столкнулся с проблемой что нужно проследить на странице за созданием элемента. Сначала подумал что можно подписаться на такое событие, но сразу нашел статью что так сделать нельзя, и что ничего не остается кроме как циклично просматривать страницу на появление того самого элемента.
Начал писать код. И в итоге пришел к тому что ни одна из вариаций setTimeout() или setInterval() не работает корректно. Начинается busy waiting, страница ломается и падает. Вот вопрос: как правильно реализовать этот самый таймаут(конкретно в вопросе расширения для гугла)
код

while(explr_status) {
        try {
            document.getElementsByClassName(" class")[0].click()
            explr_status = !explr_status
        }
        catch (err) {
            setTimeout(()=> {console.log(err)}, 2000)
        }
    }

Comments

[Lynn «Кофеман»]

Как люди умудряются что-то писать на JS не понимая базового синтаксиса…

У вас банальный бесконечный цикл который бесконечно плодит setTimeout-ы

Answer 1

[Надим]

Пример:

Развернуть код

function waitElements(selector, regexp, where) {
	
	return new Promise(function(returnResult) {
		
		var search_result = false;
		
		var local_reactive_function = function() {
			
			var wait_elements = searchElements(selector, regexp, where);
			
			if (wait_elements.length > 0) {
				
				if (search_result === false) {
					
					search_result = true;
					observer.disconnect(); 
					
					returnResult(wait_elements);
					
				}
				
			}
			
		}
		
		var observer = new MutationObserver(local_reactive_function);
		
		observer.observe(document.body, {
			characterData: true,
			attributes: true,
			childList: true,
			subtree: true
		});
		
		local_reactive_function();
		
	});
	
}

function searchElements(selector, regexp, where) {

	var search_elements = [];
	
	if (typeof where !== 'undefined') {
		
		var all_elements = where.querySelectorAll(selector);
		
	}
	
	else {
		
		var all_elements = document.querySelectorAll(selector);
		
	}
	
	for (var n = 0; n < all_elements.length; n++) {
		
		if (typeof regexp == 'object') {
			
			if (typeof regexp.test == 'function') {
				
				if (regexp.test(all_elements[n].innerText.trim())) {
					
					search_elements.push(all_elements[n]);
					
				}
				
			}
			
			
		}
		
		else {
			
			search_elements.push(all_elements[n]);
			
		}
	}
	
	return search_elements;

}

Функция waitElements возвращает промис, который завершается при появлении указанных элементов.

Например, чтобы дождаться появления на странице элемента с классом .class достаточно выполнить в консоли:

elements = await waitElements('.class');

console.log('Элементы успешно найдены:');
console.dir(elements);

Answer 2

[MamaLuyba]

как у тебя setInterval может не работать корректно?

const interval = setInterval(() => {
const element = document.getElementsByClassName(" class")[0];
if (element) {
element.click();
clearInterval(interval);
}
}, 500)