javascript while loop stopt

[Verwijderd]

Hoi!

code:

function unfoldCarpet(unfold_heigth) {
    var height;
    while(document.getElementById("carpet_container").clientHeight < unfold_heigth) {
         height = document.getElementById("carpet_container").clientHeight;
         document.getElementById("carpet_container").style.height = (height + 1)+"px";
         sleep(40);
    }
}

Deze code heb ik en werkt half. Het moet er voor zorgen dat een divje naar beneden komt tot een bepaalde hoogte.

Nu werkt dit zonder de sleep perfect, alleen gaat het dan te snel. Als ik er een sleep bij zet werkt het niet meer en voert hij de loop maar een keer uit.

Ik heb ook al geprobeerd de code in de while loop in een aparte functie te zetten en daar met setTimeout(doFunctie(),40);
maar ook dit werkt maar eenmalig. Nu kan ik wel 100 keer op de link klikken en dan verschijnt het divje ook, maar dit is niet de bedoeling.

Iemand een vingertje in de juiste richting?

[Bosmonster]

Animatie schrijven met setTimeout of setInterval.

[HuHu]

Het zou niet maar eenmalig mogen werken, waarschijnlijk doe je iets anders fout.

In je eerste geval (met de sleep()) gaat je script inderdaad maar één keer. De functie sleep() bestaat niet en dus stopt de JavaScript uitvoer op dat punt. Dit had je ook kunnen zien in je JavaScript console.

In het tweede geval (met de setTimeout()) doe je waarschijnlijk iets anders fout. De functie doFunctie() moet de setTimeout() ook weer aanroepen met zichzelf als argument. Op die manier blijft hij herhalen totdat de eindconditie is bereikt.

[ Voor 5% gewijzigd door HuHu op 28-06-2010 14:07 ]

[Verwijderd]

HuHu schreef op maandag 28 juni 2010 @ 14:06:
Het zou niet maar eenmalig mogen werken, waarschijnlijk doe je iets anders fout.

In je eerste geval (met de sleep()) gaat je script inderdaad maar één keer. De functie sleep() bestaat niet en dus stopt de JavaScript uitvoer op dat punt. Dit had je ook kunnen zien in je JavaScript console.

In het tweede geval (met de setTimeout()) doe je waarschijnlijk iets anders fout. De functie doFunctie() moet de setTimeout() ook weer aanroepen met zichzelf als argument. Op die manier blijft hij herhalen totdat de eindconditie is bereikt.

Klopt mensen! De functie moet zichzelf aanroepen met een setTimeout, dit deed ik verkeerd.

Bedankt het werkt!

[gvdh]

Verwijderd schreef op maandag 28 juni 2010 @ 14:00:
Ik heb ook al geprobeerd de code in de while loop in een aparte functie te zetten en daar met setTimeout(doFunctie(),40);
maar ook dit werkt maar eenmalig.

Dit doet iets anders dan wat je denkt dat het doet. Je moet de haakjes weglaten. Wat jouw code doet is de functie doFunctie uitvoeren en de return value daarvan aan setTimeout geven.

JavaScript:

setTimeout(doFunctie, 40);

Dan wordt de functie doFunctie binnen 40 ms uitgevoerd.

Op het einde van die functie moet je terug deze setTimeout doen als de div nog niet volledig is uitgerold.
Als alternatief kan je met setInterval en clearInterval werken.


O, en om de performance te verbeteren kan je document.getElementById("carpet_container") cachen i.p.v. 3 keer aan te roepen. Zeker in Internet Explorer kan dit een verschil maken.

Edit: te laat, maar de laatste lijn blijft wel interessant.

[ Voor 3% gewijzigd door gvdh op 28-06-2010 14:18 ]

[HuHu]

Verwijderd schreef op maandag 28 juni 2010 @ 14:14:
[...]


Klopt mensen! De functie moet zichzelf aanroepen met een setTimeout, dit deed ik verkeerd.

Bedankt het werkt!

Let op dat je geen oneindige lus maakt.