Периодически не срабатывает setTimeout — в чём может быть проблема?

Question

[Григорий]

Есть функция которая срабатывает при setTimeout - периодически не срабатывает.

function someName(){
if (true){
		setTimeout(anoutherFunction, 2000);
	}
}

Как проверить причину - на сайте много всякого шлака который подгружается - нужно выставить этот setTimeOut в приоритет - думаю проблема в стеке задач - но не хватает опыта отладить процесс) но может быть ещё в чём-то)

Comments

[Kovalsky]

"Периодчески не срабатывает setTimeOut — в чём может быть проблема?" - проблема в том, что вы работаете в блокноте. Уже много много лет для разработки используют IDE которая решает все подобные проблемы,

[Григорий]

Kovalsky, сколько умников - работаю в PHPStorm и VisualStudio
Опечатался в вопросе - не копипастил

[Kovalsky]

Григорий, эээ, ну а чего вы ожидаете показывая код в котором используются несуществующие ни в спеке ни в DOM функции? Это сразу бросилось в глаза, поэтому вам об этом и написали. Ну ладно, раз от руки то понятно. Мне просто в голову не могло придти, что на технических форумах есть люди, которые могут в топик конкретного технического вопроса написать код не имеющий отношения к вопросу, да ещё и от руки,

Ну тогда справедливо всё что вам ниже написали - какая-то часть вашего алгоритма проседает, то есть либо условие не выполняется, либо еще что. Я сильно сомневаюсь, что вам нужна помощь со стороны, потому что это всё решается дебагом - просто сидите и проверяете каждую часть алгоритма выводами в консоль например, исправляете те места которые работают не так как нужно

Answer 1

[Kovalsky]

Если действительно сам алгоритм правильный, и всё ломается из-за каких-то сторонних эффектов, то всё уже сложнее. Если например вы считаете, что сторонние скрипты сбрасывают таймауты, то можно попробовать декорировать clear* и посмотреть действительно ли какой-то скрипт их вызывает для массового сброса:

(() => {
    [ 'clearInterval', 'clearTimeout' ].forEach(method_name => {
        const original_method = window[ method_name ];
        window[ method_name ] = function() {
            console.log(`method ${ method_name } is called with arguments:`, arguments)
            return original_method.apply(this, arguments)
        }
    })
})()

Comments

[Григорий]

Спасибо! Вычислили функцию ломающую все setTimeout на сайте)

Answer 2

[Дима Паутов]

setTimeout то скорей всего работает, а вот то, что происходит внутри функции, скорей всего не всегда работает как ожидается. Простой console.log внутри setTimeout покажет, что она работает.

Никаких приоритетов у него нет

Comments

[Григорий]

Делал консоль лог - когда таймер срабатывает - консоль и внутри него и внутри вызываемой функции отрабатывает - когда таймер не срабатывает то ничего не происходит.
Отслеживаю ошибки вылетающие в консоле со всяких подключенных внешних скриптов и прочего, бывает что к примеру останавливается на 4-й ошибке и таймер не срабатывает. Ошибки не связаны с файлом в котором описан таймер, сам файл отрабатывает ок без ошибок
Но вот есть некая периодичность когда таймер не отрабатывает.
Хочу понять как её отследить, или как ещё таймер запустить, консоль логи вешал где только можно не помогает.
Дело в стеке или ещё в чём)

Answer 3

[twobomb]

Нет такой функции setTimeOut, есть setTimeout
P.S. Если только вы не создали свою функцию с таким именем

Comments

[Григорий]

Да, да ок - но она бы тогда периодически не срабатывала - а вообще ошибку выдавала бы. Опечатался в вопросе.

[twobomb]

Григорий, Ну я думал это код из вашего проекта, если нет тогда нужен код. Если нет синтаксических ошибок значит есть логическая ошибка

[Григорий]

twobomb, проект мой
Сами функции примитивные, ничего сложного

function roboChat(authorName, authorPhoto) {

	function robochatFirstStep() {
		
		firstMessage.innerHTML = '<img class="roboChatLeaveComment__message__img" src="' + roboChatauthorImg + '" alt="' + roboChatauthorName + '">Добрый день! Понравилась ли Вам моя публикация?';
		robochatRating.style.display = 'flex'

		var likeBtnRating = document.querySelector('#likeArticle_BTN');
		var dislikeBtnRating = document.querySelector('#dislikeArticle_BTN')

		likeBtnRating.addEventListener('click', robochatSecondStep);
		dislikeBtnRating.addEventListener('click', robochatSecondStep);

		document.querySelector('#dislikeArticle_BTN').onclick = '';
	}

	if (document.querySelector('.roboChatLeaveComment__body__message')) {
		setTimeout(function(){
                       // вот тут не отрабатывает
			robochatFirstStep();
		}, 5000);
	}


	function robochatSecondStep() {
		$roboChatLeaveCommentBody.innerHTML += '<div class="roboChatLeaveComment__body__message">' + roboChatMessWriting + '</div>';
		setTimeout(roboChatThirdStep, 5000)
	};

	function roboChatThirdStep() {
		$roboChatLeaveCommentBody.removeChild($roboChatLeaveCommentBody.lastChild);
		$roboChatLeaveCommentBody.innerHTML += '<div class="roboChatLeaveComment__body__message"><img class="roboChatLeaveComment__message__img" src="' + roboChatauthorImg + '" alt="' + roboChatauthorName + '">Спасибо! Давайте ее обсудим!</div>';

	}

	

	// keyRobochat = true;

}

[twobomb]

Григорий,

if (document.querySelector('.roboChatLeaveComment__body__message'))

Это че такое? Добавьте нормальную булеву переменную, а то тут такой странный код.
Вот это еще уникальная вещь

document.querySelector('#dislikeArticle_BTN').onclick = '';

[Kovalsky]

twobomb, да не, эти куски кода конечно немного странные, но мысль понятна, да и код должен быть рабочий, так что ошибка вряд ли тут

[twobomb]

Kovalsky, Ну здесь очевидно же, если не отрабатывает таймаут то ошибка может быть только тут

if (document.querySelector('.roboChatLeaveComment__body__message'))

[Григорий]

twobomb, по сути вопроса есть что сказать?)
Указанные предложения не влияют на setTimeout)
1 - проверка существования элемента - это нормальная практика если больше нигде не планируется использовать конструкцию чтобы не засорять переменными пространство.
2 - это снятие onclick тестировал - также не имеет отношения в вопросу

[Григорий]

Kovalsky, вот и я о том же - код простой до безобразия - но иногда SetTimeout не отрабатывает...
Уже всем отделом голову сломали - на JS я один, опыт небольшой - поэтому не могу сообразить
Может как-то в супер приоритет этот setTimeout поставить?))

[twobomb]

Григорий, По сути и говорю, если это

if (document.querySelector('.roboChatLeaveComment__body__message'))

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

[Григорий]

twobomb, я это условие прописал для дополнительной активации таймера
Изначально этой конструкции не было - и была та же проблема

[twobomb]

Григорий, Ну значит функция вызывается второй раз, и просто не происходит тех действий которые вы ожидаете.

[Kovalsky]

Григорий, ну проверьте каждый шаг алгоритма: вызов и завершение работы каждой функции, вход в условные блоки, помещение функции в очередь (setTimeout), выполнение этой функции и тд и тп,

[Григорий]

Kovalsky, всё проверил - все используемые функции простые - дальше innerHtml не выходящие

[Kovalsky]

Григорий, и до какой точки доходит выполнение? Функция robochat выполняется? В условный блок заходит? В setTimeout заходит? Функция переданная в setTimeout выполняется? robochatFirstStep выполняется?

[Григорий]

Kovalsky, либо выполняется всё либо доходит до первого таймера и ничего не происходит
Бывает что доходит до второго таймера и тоже ничего не происходит
Что-то выбивает таймер - думиаю что внешние рекламные скрипты и ещё что-либо
Заметил что для залогиненных пользователей всё работает стабильно, для разлогиненных происходит вылет.
Вот пример внизу статьи есть тот самый робоЧат
https://www.9111.ru/questions/777777777943140/
Можно увидеть принцип работы и отследить когда таймер не срабатывает

[Kovalsky]

Григорий, ну это скорее для вас вопросы были, чтобы вы сами отдебажили и посмотрели какой конкретно шаг алгоритма фейлится. Если действительно сам алгоритм правильный, и всё ломается из-за каких-то сторонних эффектов, то всё уже сложнее. Если например вы считаете, что сторонние скрипты сбрасывают таймауты, то можно попробовать декорировать clear* и посмотреть действительно ли какой-то скрипт их вызывает для массового сброса:

(() => {
    [ 'clearInterval', 'clearTimeout' ].forEach(method_name => {
        const original_method = window[ method_name ];
        window[ method_name ] = function() {
            console.log(`method ${ method_name } is called with arguments:`, arguments)
            return original_method.apply(this, arguments)
        }
    })
})()

[Григорий]

Kovalsky, вот это уже интереснее)) спасибо!
в понедельник протестирую)

[Григорий]

Kovalsky, доброе утро!
Подключил вашу функцию
Действительно - в неавторизованном варианте выдаёт консоль лог с периодичностью. Для авторизованных пользователей такого нет. Ну, это так, лирика)
Как теперь понять что инициализирует процесс?

[Григорий]

Всё нашли)) Спасибо Вам!
Благодаря git даже вычислили кто это сделал.
3 года назад.
Верстальщик создал функцию:

function stopAllTimeouts() {
	var id = window.setTimeout(null, 0);

	while (id--) {
		window.clearTimeout(id);
	}
}

В общем все нужные ему setTimeout собрали в массив и передавали stopAllTimeouts этот массив

function stopQChatTimeouts(timeouts) {
	for (var i = 0; timeouts.length > i; i++) {
		window.clearTimeout(timeouts[i]);
	}
}

Как вас можно отблагодарить?)

[Григорий]

Kovalsky, можете разместить ваш ответ в "ответах на вопрос" чтобы я его отметил "ответом на вопрос"))
оказывается

К сожалению, отметить решением можно только ответ. Можно попросить автора комментария разместить его в виде ответа.

---
Служба поддержки Хабр Q&A