setTimeout w pętli for Opcje

[matewka]

Witam. Nurtuje mnie pewien problem. Chciałbym zrobić funkcję, która przesuwa obrazek w dół i w prawo o 3 piksele w pewnych odstępach czasu. Z tym, że chciałbym, żeby te odstępy czasu zwiększały się z każdym przesunięciem. Oto kod, który stworzyłem:

[HTML] pobierz, plaintext 
function oneStep() {
         div = document.getElementById('fotka').style
         div.left = parseInt(div.left)+3+"px"
         div.top = parseInt(div.top)+3+"px"
}
function moveImage() {
         for(i=1000;i<=15000;i+=1000) {
         window.setTimeout("oneStep()",i)
}
}
[HTML] pobierz, plaintext 

Jak widać, funkcja oneStep() przesuwa obrazek, ale przedtem funkcja moveImage() każe jej odczekać jedną sekundę. Następnie oneStep() znów przesuwa obrazek i tym razem ma odczekać 2 sekundy, następnie 3, 4 itd. aż do 15 sekund. Niestety w rzeczywistości tak się nie dzieje. Obrazek cały czas przesuwa się co 1 sekundę aż przesunie się 14 razy. Specjalnie ustawiłem długie opóźnienie, żeby zniwelować błędy spowodowane szybkością czytania kodu przez przeglądarkę. Ale niestety różnica w czasie między kolejnymi przesunięciami nadal jest niezauważalna. Co robię źle?

Ten post edytował matewka 14.10.2010, 13:50:47

[erix]

Wszystkie timeouty startują jednocześnie, w tym problem.

Pętlą raczej tego nie zrobisz:

[JAVASCRIPT] pobierz, plaintext 
var counter = 15;
var delay = 1000;
 
function oneStep() {
         counter--;
         if(counter<0){
            return;
         }
 
         div = document.getElementById('fotka').style
         div.left = parseInt(div.left)+3+"px"
         div.top = parseInt(div.top)+3+"px"
 
         delay += 1000;
 
         setTimeout(oneStep, delay);
}
 
oneStep();
[JAVASCRIPT] pobierz, plaintext 

[matewka]

Rzeczywiście działa! Wielkie dzięki. Cały dzień się nad tym głowiłem. Też już myślałem o podobnym rozwiązaniu, ale sama koncepcja była dla mnie, początkującego javowca, zbyt skomplikowana, więc nawet nie zaczynałem.