Почему увеличивается скорость выполнения функции через setinterval на каждом следующем шаге?

Question

[Алексей Скляров]

Есть функция, отвечающая за слайдер, которая выполняется каждые 15 секунд. В теле этой функции находится еще одна функция через setinterval , которая выполняется через 14 секунд. Суть работы следующая: основная функция проигрывает анимацию (появление объектов), внутренняя функция каждые 14 секунд (время когда вся анимация уже проигралась) добавляет ко всем объектам прозрачность (все исчезает). После чего через секунду (15-14) проигрывается снова анимация с появлением объектов.

Но заметил очень странную для себя вещь. Примерно на 5-7 повторении анимации, основная и внутренняя функции работаю не так как задумывалось (с разницей в 1 сек), а по-своему. Т.е внутренняя функция на 5-6 повторении "стерает" объекты быстрее, чем проигрывается анимация. Почему так происходит?

function my_slider_1() {
		    	setInterval(function() {
	    		var first = $( ".home-img-animate-1" );
				var second = $( ".home-img-animate-2" );
				var title_1 = $( ".anim-opacity-1" );
				var title_2 = $( ".anim-opacity-2" );
				var title_3 = $( ".anim-opacity-3" );
	    		title_1.removeClass("animation-opacity");
	    		first.css("opacity","0");
	    		second.css("opacity","0");
	    		title_1.css("opacity","0");
	    		title_2.removeClass("animation-opacity2s");
	    		title_2.css("opacity","0");
	    		title_3.css("opacity","0");
	    		title_3.removeClass("animation-opacity");
	    		$( ".pechat" ).removeClass( "expandOpen full-opacity" )
	    	}, 14000);
	var first = $( ".home-img-animate-1" );
	var second = $( ".home-img-animate-2" );
	var title_1 = $( ".anim-opacity-1" );
	var title_2 = $( ".anim-opacity-2" );
	var title_3 = $( ".anim-opacity-3" );
	var sausage_1 = document.querySelector("#sausage-1");
	var sausage_2 = document.querySelector("#sausage-2");
	var titleid_1 = document.querySelector("#anim-opacity-1");
	var titleid_2 = document.querySelector("#anim-opacity-2");
	var titleid_3 = document.querySelector("#anim-opacity-3");
	var pechat = document.querySelector("#pechat");
		first.addClass( "move-1" ).css("opacity","1");
		second.addClass( "move-2" ).css("opacity","1");
	  	sausage_1.addEventListener("animationend",function(e){
	  		first.removeClass("move-1");
	    	first.addClass("alarm");
	    	second.removeClass("move-2");
	    	second.addClass("alarm");
	    	title_1.addClass("animation-opacity");
	    	title_1.css("opacity","1");
		},false);
		sausage_1.removeEventListener("animationend",function(e){
	  		first.removeClass("move-1");
	    	first.addClass("alarm");
	    	second.removeClass("move-2");
	    	second.addClass("alarm");
	    	title_1.addClass("animation-opacity");
	    	title_1.css("opacity","1");
		},false);
		titleid_1.addEventListener("animationend",function(e){
			title_2.addClass("animation-opacity2s");
	    	title_2.css("opacity","1");
	    	title_3.addClass("animation-opacity");
	    	title_3.css("opacity","1");
		},false);
		titleid_1.removeEventListener("animationend",function(e){
			title_2.addClass("animation-opacity2s");
	    	title_2.css("opacity","1");
	    	title_3.addClass("animation-opacity");
	    	title_3.css("opacity","1");
		},false);
		titleid_3.addEventListener("animationend",function(e){
			$( ".pechat" ).addClass( "expandOpen full-opacity" );
		},false);
		titleid_3.removeEventListener("animationend",function(e){
			$( ".pechat" ).addClass( "expandOpen full-opacity" );
		},false);
		pechat.addEventListener("animationend",function(e){
	  		second.removeClass("alarm");
	    	first.removeClass("alarm");
		},false);
		pechat.removeEventListener("animationend",function(e){
	  		second.removeClass("alarm");
	    	first.removeClass("alarm");
		},false);

}

$(document).ready(function(){
  my_slider_1();
  setInterval(my_slider_1, 15000);
});

Comments

[Nikolay Talanov]

Боже мой, где учат писать такой адовый говнокод?

[Алексей Скляров]

Nikolay Talanov: полагаю, когда вы пытались выучить язык, вы писали его уже по всем канонам

Answer 1

[Максим Алёхин]

У вас срабатывает первый интервал, срабатывает функция my_slider_1, внутри этой функции ещё один интервал.
Получается что каждый раз когда срабатывает первый интервал он запускает ёщё один интервал внутри функции.
И таким образом в конце будет запущено целая куча интервалов, что приводит к тому что ваши правила во втором интервале обнуляются чаще чем нужно.

Решение: замените второй интервал на таймаут.