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

[CraftLawrence]

Доброго времени суток.
По чуть-чуть изучаю 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.backgroundSi ze = "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.displa y = "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.displa y = "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.displ ay = "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.displ ay = "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;
}

[MallSerg]

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

[CraftLawrence]

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

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

[CraftLawrence]

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

[kostyanet]

а 10 минут простоя процесс хрома весит уже 2Гб.

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

[kostyanet]

Посмотрел коды. Это не так делается. Для 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 - быстрее.