Ускоряется setInterval
 

Здравствуйте!
Есть функция которая меняет изображения (setInterval 1). Смена изображений происходит через определенное время (setInterval 2).
Работает! Но не корректно.
Если вкладка страницы открыта, но не активна скорость смены изображений начинает ускоряться в бесконечность.
Может кто-то сможет сказать почему так и это как это исправить?

var images = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png', 'img/5.png'],
length = images.length,
index = 1;
function animate() {
id=setInterval (function()
{
if(index == length) index = 0;
document.getElementById('img').src = images[index++];
if(index == 5) clearInterval(id); // если достигнуто последнее изображение, то очищать setInterval
}, 65) // интервал смены изображений (setInterval 1)
}
setInterval(animate, 4500) // интервал между сменами изображений (setInterval 2)

Tord002,
попробуйте никогда не использовать setInterval в своих скриптах ... :( или хотябы научитесть обнулять предыдущий прежде чем запустить новый

Пробую обнулить. Итог тот же

var images = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png', 'img/5.png'],
length = images.length,
index = 1;

function animate() {
id1=setInterval (function()
{
if(index == length) index = 0;
document.getElementById('img').src = images[index++];
if(index == 5) clearInterval(id1);
}, 65) // интервал смены изображений (setInterval 1)
clearInterval(id2);
animate2();
}

function animate2() {
id2=setInterval(animate, 4500)
}
animate2();

Tord002,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Простите! Вот:

var images	= ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png', 'img/5.png'],
length = images.length,
index	= 1; 

function animate() {
id1=setInterval (function() 
{
if(index == length) index = 0;
document.getElementById('img').src = images[index++];
if(index == 5) clearInterval(id1);
}, 65) // интервал смены изображений (setInterval 1)
clearInterval(id2);
animate2();
}

function animate2() {
id2=setInterval(animate, 4500)
}
animate2();

Tord002,
и что хотите получить зачем два интервала?

Tord002,
может вы так хотели?

var images = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png', 'img/5.png'],
 length = images.length,
 index = 1;

 function animate() {
 document.getElementById('img').src = images[index];
 index = ++index % length
 }

 setInterval(animate, 4500)

Немного не так. В этом и проблема.
Нужно чтобы изображения менялись один цикл с интервалом, например 65
После это пауза - 4500. И цикл запускается снова.

Tord002, setTimeout тогда лучше.

Tord002,

var images = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png', 'img/5.png'],
 length = images.length,
 index = 0;

 (function animate() {
 document.getElementById('img').src = images[index];
 index = ++index % length
 window.setTimeout(animate,index ? 65 : 4500)
 }())