Скрипт бесконечно загружает ОЗУ
 

Доброго времени суток.
По чуть-чуть изучаю JS по ходу работы, вот столкнулся с проблемой. Мой код при выполнении бесконечно грузит ОЗУ. Он работает, через секунд 15 заканчиваются все предписанные мною анимации, и все, он должен просто остановиться, но нет..
За 10 минут простоя процесс хрома весит уже 2Гб. Понимаю, что косяк у меня крайне грубый и мне уже за него стыдно, но найти его не могу.

Код прилагается. Постарался в комментариях немного пояснить, что я там хотел сделать. Если коротко, он поочередно на странице "вытаскивает" элементы из display: none, и с помощью Opacity от 0 до 1 постепенно их "проявляет". Потом для некоторых из них идет смена положения и все, он должен остановиться..

Вроде все позакрывал с помощью "return false;"..
И пробовал спасти ситуацию Try catch'ами (а вдруг) - они тут бессильны т.к. я использую setInterval и setTimeout.

function moveTo(element, target) { // функция перемещения объекта до позиции какого-то элемента
    var targetOffset = target.offset();
    element.animate({
        top: targetOffset.top + 142,
        left: targetOffset.left + 142
    }, 1000);
    return false;
}


function animate() { // можно сказать, моя главная функция, с нее все начинается
	var scr_h = document.body.clientHeight;
	document.getElementById('body').style.backgroundSize = "1366px " + scr_h + "px";	
	opacityplus(document.getElementById('firsttitle'), 20);
	/*document.getElementById('test').innerHTML = "done!";*/
	return false;
}
setTimeout(animate, 700); // запуск ее через 0,7с

function opacityplus(element, speed){ // постепенное появление элемента
	document.getElementById('firsttitle').style.display = "block";
    setInterval(function(){
        if(+element.style.opacity>0.99||!element.style.opacity){
        	opacityminus(document.getElementById('firsttitle'), 20);
            return false;
        }
        element.style.opacity = +element.style.opacity + 0.01;
    }, speed);
}
function opacityminus(element, speed){ // потом этот элемент постепенно пропадает
    setInterval(function(){
        if(+element.style.opacity<0.01||!element.style.opacity){
        	document.getElementById('firsttitle').style.display = "none";
        	setTimeout(foropacityplus, 500);  	
            return false;
        }
        element.style.opacity = +element.style.opacity - 0.01;
    }, speed);
}
function foropacityplus(){ // функция для задержки перед появлением второго элемента
	opacityplus1(document.getElementById('singleicon1'), 300);
	return false;
}
function opacityplus1(element, speed){ // постепенное появление второго элемента
	document.getElementById('singleicon1').style.display = "block";
    setInterval(function(){
        if(+element.style.opacity>0.99||!element.style.opacity){
        	setTimeout(foropacityplus2, 1000);     	
            return false;
        }
        element.style.opacity = +element.style.opacity + 0.01;
    }, speed);
}
function foropacityplus2(){ //тут я двигаю второй элемент и перехожу к третьему
	moveTo($('#singleicon1'), $('#target1'));
	setTimeout(foropacityplus22, 1000);
	return false; 
}
function foropacityplus22(){ // снова функция для задержки
	opacityplus2(document.getElementById('singleicon2'), 300);
	return false;
}
function opacityplus2(element, speed){ // и снова постепенное появление третьего элемента
	document.getElementById('singleicon2').style.display = "block";
    setInterval(function(){
        if(+element.style.opacity>0.99||!element.style.opacity){        	
        	setTimeout(foropacityplus3, 1000);
            return false;
        }
        element.style.opacity = +element.style.opacity + 0.01;
    }, speed)
}
function foropacityplus3(){ // тут я снова двигаю третий элемент
	moveTo($('#singleicon2'), $('#target2'));
	
	return false;
}

setInterval не останавливается
когда условие становится верным (+element.style.opacity>0.99||!element.style.opaci ty )
происходит вызовopacityminus(который запускает новый setInterval который запускает opacityminus( и.т.д. и.т.п.
и каждый вызов setInterval количество вызовов удваивается.

Так и думал.
А как остановить setInterval? Clearinterval поможет? Если да, то как и где это повставлять? Перед return false внутри if?

Вопрос решил.
Clearinterval нужно запускать с if внутри этого самого интервала, и все работает.

А когда ошибку исправите, то получите фору в час-полтора, только и всего. Хром все равно зохавает эти 2 гига если ему крутить картинками перед мордой в порядке var img = new Image(); Он же долбоящер - все кеширует.

Посмотрел коды. Это не так делается. Для fade используется css transition и парочка img

img_onload=function(){
			p_load.style.display='none';
			if(p_img_top.classList.contains('opacity100'))
				p_img_bot.src=this.src;
			else
				p_img_top.src=this.src;
			p_img_top.classList.toggle('opacity100');
			p_img_bot.classList.toggle('opacity100');
		},

Этот кусок для произвольных размеров img в произвольном контейнере. Для фиксированного размера анимируется только верхний img.

и для подвижек - аналогично. Потому что подвижки вручную, то есть через style.left например, идут через layout, и медленно, а через css - быстрее.