Доброго времени суток.
По чуть-чуть изучаю 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;
}
