jeden Schleifendurchlauf ausgeben bei "wanderndem div"

[Bor]

Hallo,
wie kann ich bei jedem Durchlauf der for-Schleife die neue Position des div-Containers "box" ausgeben lassen?
So läuft er die Schleife ja nur durch und zeigt mir die Endposition.

  
function runter_wandern()  
{  
  for (i = 0; i <= 100; i++)  
  {  
    document.getElementById("box").style.top = i + 50 + "px";  
    window.setTimeout("runter_wandern()", 80);  
  }  
}  

[T-Rex]

Hallo,
wie kann ich bei jedem Durchlauf der for-Schleife die neue Position des div-Containers "box" ausgeben lassen?
So läuft er die Schleife ja nur durch und zeigt mir die Endposition.

function runter_wandern()
{
  for (i = 0; i <= 100; i++)
  {
    document.getElementById("box").style.top = i + 50 + "px";
    window.setTimeout("runter_wandern()", 80);
  }
}

  
  
window.setTimeout("runter\_wandern()", 80);  
  
Das da musst du nur einmal aufrufen. Um genauer zu sein musst du noch was ergänzen:  
var intInterval = window.setTimeout("runter\_wandern()", 80);  
(Du rufst es bei jedem schleifen Durchlauf auf. Dass kann schnell zu einem vollen Cache führen.  
  
Jetzt wird runter\_wandern() alle 80 milisekunden aufgerufen. Wenn das wandern zum ende kommt, musst du den timeout wieder löschen:  
clearInterval( intInterval );  
  
Gruß  
  
T T- T-R T-Re T-Rex

[Bor]

Hallo,
wie kann ich bei jedem Durchlauf der for-Schleife die neue Position des div-Containers "box" ausgeben lassen?
So läuft er die Schleife ja nur durch und zeigt mir die Endposition.

function runter_wandern()
{
  for (i = 0; i <= 100; i++)
  {
    document.getElementById("box").style.top = i + 50 + "px";
    window.setTimeout("runter_wandern()", 80);
  }
}

>   
>   
> window.setTimeout("runter\_wandern()", 80);  
>   
> Das da musst du nur einmal aufrufen. Um genauer zu sein musst du noch was ergänzen:  
> var intInterval = window.setTimeout("runter\_wandern()", 80);  
> (Du rufst es bei jedem schleifen Durchlauf auf. Dass kann schnell zu einem vollen Cache führen.  
>   
> Jetzt wird runter\_wandern() alle 80 milisekunden aufgerufen. Wenn das wandern zum ende kommt, musst du den timeout wieder löschen:  
> clearInterval( intInterval );  
>   
> Gruß  
>   
> T T- T-R T-Re T-Rex  
  
Alles klar. So wird n Schuh draus. Dann lass ich die for-Schleife gleich ganz weg. :)  
~~~javascript
  
function runter_wandern()  
{  
  i++;  
  document.getElementById('box').style.top = i + 50 + "px";  
  var intInterval = window.setTimeout("runter_wandern()", 80);  
  if (i >= 100) clearInterval( intInterval );  
}  

Dankeschön

[JürgenB]

Hallo Bor,

function runter_wandern()
{
  i++;
  document.getElementById('box').style.top = i + 50 + "px";
  var intInterval = window.setTimeout("runter_wandern()", 80);

hier startest du einen Timeout

if (i >= 100) clearInterval( intInterval );

und hier beendest du ihn sofort wieder, wenn auch als Interval.

}

  
besser wäre (ungetestet!)  
  
~~~javascript
  
var i=0, elestyle=document.getElementById('box').style;  
function runter_wandern()  
{  
  i++;  
  elestyle.top = i + 50 + "px";  
  if (i < 100) window.setTimeout("runter_wandern()", 80);  
}  

Gruß, Jürgen

[molily]

var i=0, elestyle=document.getElementById('box').style;
function runter_wandern()
{
  i++;
  elestyle.top = i + 50 + "px";
  if (i < 100) window.setTimeout("runter_wandern()", 80);
}

  
Und bitte keine Strings, sondern Funktionsobjekte an setTimeout übergeben. Strings machen späteres Kapseln nur schwieriger, da die Funktion global sein muss. Und dies drückt allgemein die Performance.  
  
[Module und Kapselung](http://molily.de/js/organisation-module.html)  
  
Mathias

[T-Rex]

Module und Kapselung

Das ist ja mal eine super Seite!!
Da hätte ich mir die tausend Javascript Bücher und schlechten Tutorials echt sparen können!!

Voll Klasse!

Gruß
begeisterter
T-Rex

[Matthias Apsel]

Om nah hoo pez nyeetz, T-Rex!

Module und Kapselung

Das ist ja mal eine super Seite!!

Du solltest die Beiträge dieses Forums aufmerksamer lesen. Ich kann kaum glauben, dass dir heute erstmals ein Link zu molilys Tutorial aufgefallen ist.

Matthias

[T-Rex]

Du solltest die Beiträge dieses Forums aufmerksamer lesen. Ich kann kaum glauben, dass dir heute erstmals ein Link zu molilys Tutorial aufgefallen ist.

Ich brauch auch nichts loben, wenn ich dafür so eine Antwort bekomme...

Gruß
gekränkter Dino
T-Rex

[Gunnar Bittersmann]

@@T-Rex:

nuqneH

Module und Kapselung

Das ist ja mal eine super Seite!!

Und das ist mal ein super Vortrag: Reusable Code - For Good or For Awesome! von Jake Archibald auf der beyond tellerrand 2011 (Video, Slides)

Nicht nur fachlich; Jake hat einfach Spaß und bringt den zum Publikum rüber.

Qapla'