setTimeout functie werkt niet zoals het moet

[Strega]

Hallo,

Ik ben nieuw in Javascript en heb een klein probleempje.
Ik heb een functie die volledig werkt behalve de setTimeout functie die er in voorkomt.
Dit is what ik heb.
[JS]foto_op = 0
function fade_foto(img_name) {
document.getElementById(img_name).style.opacity=foto_op
foto_op = foto_op + 0.05
if(foto_op<1) setTimeout(fade_foto(img_name), 50)
}[/JS]
Hij wacht geen 50 ms voor hij terug die functie herhaald.
Want als ik dit doe:
[JS]foto_op = 0
function fade_foto(img_name) {
alert(foto_op)
document.getElementById(img_name).style.opacity=foto_op
foto_op = foto_op + 0.05
if(foto_op<1) setTimeout(fade_foto(img_name), 50)
}[/JS]
Dan zie ik wel dat hij de functie herhaald tot foto_op gelijk is aan 1.

Groeten, Strega

 

[legifri]

Mogelijk antwoord

Hoi,
Ik weet niet of dit klopt want ik ben zelf ook nog aardig nieuw op het gebied van javascript maar ik denk dat je setInterval() moet gebruiken.

setTimeout herhaalt de expressie niet, maar setInterval blijft de expressie wel herhalen totdat jij hem stopt. Dus misschien wil je dat even proberen.
Groeten Legifri

 

[That Guy]

setTimeout functie werkt niet zoals het moet

Ohja? Dat durf je zomaar te beweren?....




... Let op. setTimeout ziet er als volgt uit:

function setTimeout(function-reference, milliseconds-timeout)

de functie-reference is simpelweg de naam van een functie. milliseconds-timeout de tijd in ms die gewacht moet worden.

Ofwel, zoiets:
[JS]function test()
{
alert('test');
}

setTimeout(test, 1000);[/JS]zal 1000 ms (= 1 seconde) wachten voordat de 'test' functie wordt aangeroepen.

NOOT DAT DE FUNCTIE-REFERENTIE GEEN FUNCTIE-CALL IS. Dit betekent dat je geen parameters mee kan geven, want dat voert de functie uit, in plaats van een referentie te plaatsen.


Maak bijvoorbeeld een globale variabele aan met daarin je parameter:
[js]var foto_op = 0;
var foto_name = '';

function fade_foto(img_name)
{
if(img_name)
{
foto_name = img_name;
}

document.getElementById(foto_name).style.opacity = foto_op;
foto_op = foto_op + 0.05;

if(foto_op < 1)
{
setTimeout(fade_foto, 50);
}
}[/js]
nu kan je 1x je functie aanroepen, en slaat ie dus je foto naam globaal op. MAAR! Wat nu als je dit voor meerdere foto's wilt doen (wat ik aanneem - je foto_op variabele werkt zo niet!)? Nou, dan kan je gebruik maken van een omweggetje:
[js]function fade_foto(img_name, opac)
{
document.getElementById(img_name).style.opacity = opac;
opac = opac + 0.05;

if(opac < 1)
{
setTimeout(function()
{
fade_foto(img_name, opac);
}, 50);
}
}[/js]
zoals je ziet maak je even 'snel' een functie aan; en deze gebruik je in de functie-parameter plek. Voila! Roep je functie zo aan:
[js]fade_foto('fotogeval', 0);[/js]als je het element met id 'fotogeval' wilt laten faden vanaf 0 (zichtbaar 100%) dus. Bijkomend voordeel: je kan nu meerdere elementen laten faden, en vanaf verschillende opacities!



:thumb: