Функция будто зацикливается.MutationObserver.

[sander234]

Добрый день всем!
Пишу скрипт,и столкнулся с проблемой.Суть работы ,что данная ниже функция вызывается из другой.При срабатывание этой функции идет проверка на определенный "<li>" на странице, если он имеется:кликаем на кнопку и вводим "value" в "input",далее еще один клик по кнопке.В общем и целом это все прекрасно работает.НО!Есть одна проблемка.Условно ,мы начали поиск,страница пустая(нету нужного элемента "<li>") ,далее еще раз поиск(нет элемента),еще поиск(нет элемента),поиск (элемент есть) и тут будто клинит скрипт:тот же console.log срабатывает количество неудачных поисков,соответственно и клики так же заклинивает на это же количество раз.Если элемент находится с первого раза ,то никаких клинов нет.Я так понимаю у меня проблема где-то в завершение функции.Но добавление else после if никаких изменений не дает.В общем я не догоняю в чем проблема.Функцию с кака-кодом прикладываю .Буду благодарен в советах!)

function putitem(){ 
	
var observer1 = new MutationObserver(function(allmutations) {
	
item1 = document.querySelector('li.item.active');

if(item1){
        
		
		setTimeout (function(){
        senditem1 = document.querySelector('button.accordian');	
        simulateClick(senditem1)},500)
		
		setTimeout(function(){
        document.querySelectorAll('input.numeric')[1].value="400"},1000);
        
		
		setTimeout(function(){
        sendon1 = document.querySelectorAll('button.btn-standard')[0];	
        simulateClick(sendon1)},1500);
		
	    console.log("listed ",document.querySelector('.itemname').innerHTML);
		
	
		
		 observer1.disconnect();
  }

});
 observer1.observe(document.body, {childList: true,subtree : true, attributes: true, characterData : true});		   
}

[Malleys]

sander234, если вам нужен однократный поиск при вызове putitem, то можно так...

function putitem() {
	var item1 = document.querySelector("li.item.active");

	if (item1) {
		setTimeout (function() {
			senditem1 = document.querySelector('button.accordian');
			simulateClick(senditem1)
		}, 500)

		setTimeout(function() {
			document.querySelectorAll('input.numeric')[1].value = "400"
		}, 1000);

		setTimeout(function() {
			sendon1 = document.querySelectorAll('button.btn-standard')[0];
			simulateClick(sendon1)
		}, 1500);

		console.log("listed ", document.querySelector(".itemname").innerHTML);
	}
}

Если же вы хотите после вызова putitem отслеживать добавление элемента, то можно так...

var putitem = (function() {
	var observer1 = new MutationObserver(function(mutationRecords) {		
		mutationRecords.forEach(function(mutationRecord) {
			if(mutationRecord.type === "childList") {
				mutationRecord.addedNodes.forEach(function(addedNode) {
					if(addedNode.nodeType === Node.ELEMENT_NODE && addedNode.matches("li.active.item")) {
						setTimeout (function() {
							senditem1 = document.querySelector('button.accordian');
							simulateClick(senditem1)
						}, 500)

						setTimeout(function() {
							document.querySelectorAll('input.numeric')[1].value = "400"
						}, 1000);

						setTimeout(function() {
							sendon1 = document.querySelectorAll('button.btn-standard')[0];
							simulateClick(sendon1)
						}, 1500);

						console.log("listed ", document.querySelector(".itemname").innerHTML);
					}
				});
			}
		});
	});
	
	var i = 0;
	return function putitem() {
		i++;
		
		if(i === 1) {
			observer1.observe(document.body, {
				childList: true,
				subtree: true,
				attributes: true,
				characterData: true
			});
		} else {
			console.warn("Possible MutationObserver memory leak detected. No observer is created.");
		}
	}
})();

[sander234]

function putitem() {
	var item1 = document.querySelector("li.item.active");

	if (item1) {
		setTimeout (function() {
			senditem1 = document.querySelector('button.accordian');
			simulateClick(senditem1)
		}, 500)

		setTimeout(function() {
			document.querySelectorAll('input.numeric')[1].value = "400"
		}, 1000);

		setTimeout(function() {
			sendon1 = document.querySelectorAll('button.btn-standard')[0];
			simulateClick(sendon1)
		}, 1500);

		console.log("listed ", document.querySelector(".itemname").innerHTML);
	}
}

Спасибо за ответ !
Первый вариант не подходит ,потому -что ли подгружается динамически .
Пробовал танцы с рекурсией ,но как-то не удалось .

Второй вариант интересно выглядит .все дело в том ,что с наблюдателем первый раз столкнулся и не понял .А где во втором варианте ,мы его выключаем -наблюдателя ?
В моей функции он не выключается если нету элемента item1,отсюда и зацикливается ...

[Malleys]

sander234, во втором варианте он не выключается в моём коде (вы можете вставить сколько угодно li.active.item и они будут обработаны), но если вам нужно однократное срабатывание при вставке li.active.item на страницу, то добавьте observer1.disconnect(); после строки №21.

[sander234]

sander234, во втором варианте он не выключается в моём коде (вы можете вставить сколько угодно li.active.item и они будут обработаны), но если вам нужно однократное срабатывание при вставке li.active.item на страницу, то добавьте observer1.disconnect(); после строки №21.

Спасибо ,буду пробовать .
Но мне не ясно другое !
Обсервер ведь после включения ,ведёт наблюдение до его отключения ,верно?вот!
У меня он создаётся ,начинает наблюдение в это время подгружается нужный контент на сайте ,а он не видит нужный элемент !
Я пробовал через алерт проверить ,выдаёт ноль .
Но если я добавлю таймаут к вызову данной функции то сразу замечает искомый элемент и через Алерт выдаёт данные о существование .
То есть я не понимаю почему он, если элемент не найден сразу же вырубает наблюдение ?
Я могу повесить задержку на observer.disconnect ведь ?он не войдёт в цикл ?