[JS] Function loop

[X-trace]

Ik heb een javascript waarmee ik de backgroundImage van een DIV kan laten veranderen mbv CSS opcity. Bij het aanroepen van de function, dat als een onload gebeurd in de BODY tag, worden parameters meegegeven.

De script zelf, voor het faden aan de hand van aantal images in een array, werkt. Nu wil in dat zodra de laatste key in een array is geweest, de functie van voor af aan begint...een soort loop dus. Ik maak gebruik van een for functie om de boel bij langs te gaan. Hieronder een voorbeeld:

code:

function headerImage(imageArray + meer parameters) {
    amount = imageArray.length;

    for(i=0;i<amount;i++) {
        //hier de acties
    }
}

Stel dat imageArray uit 5 elementen bestaat, dan moet na het behandelen van nummer 5 weer de functie weer opnieuw beginnen.

[Sendy]

Had je een while(1) (of een andere oneindige loop) om de for-loop niet zelf kunnen bedenken?

Je moet natuurlijk wel uitkijken dat je computer nog processortijd overhoud om iets anders te doen; maar daar heb je nu ook al last van.

edit:

\/ te laat sliep uit. En dan ook nog (...) als conditie

[ Voor 14% gewijzigd door Sendy op 26-09-2006 18:27 ]

[user109731]

Nog een loop gebruiken, zoals dit :

JavaScript:

function headerImage(imageArray + meer parameters) {
  while (...) {
    amount = imageArray.length;

    for(i=0;i<amount;i++) {
        //hier de acties
    }
  }
}

Of de functie zichzelf laten aanroepen...

offtopic:
@Sendy: maar ik heb een voorbeeld erbij

[ Voor 24% gewijzigd door user109731 op 26-09-2006 18:16 ]

[André]

Ik zou voor een function met een timeout gaan, dan is de snelheid gewoon te controleren:

JavaScript:

function lopen()
{
  // actie

  setTimeout("lopen()", 100);
}

[X-trace]

De function timeout werkte niet. Firefox vond dit niet zo leuk

Verder heb ik de script nogsteeds niet werkende. Welke condities moet ik aan een while loop meegeven?

[Swaptor]

JavaScript:

while(1) {
...
}

[X-trace]

Firefox bleef wederom hangen. Heeft het dan misschien te maken met de setTimeout's die ik gebruik in een for loop?

JavaScript:

function headerImage(imageArray,.....) {
    amount = imageArray.length;
    
    //while(1) {
        for(i=0;i<amount;i++) {
            fadeInTime = (i*(speed*1000))+(i*showSeconds);
            if(i%2==0) {
                setTimeout("set background",fadeInTime);
                setTimeout("fadeOut()",fadeInTime);
                setTimeout("fadeIn()",fadeInTime);
            } else {
                setTimeout("set background",fadeInTime);
                setTimeout("fadeOut()",fadeInTime);
                setTimeout("fadeIn()",fadeInTime);
            }
        }
    //}
}

Script is nog wat uitgebreider, maar volgens mij niet nodig om overige code te posten

[André]

Die for loop wordt in een paar milliseconden een aantal keer doorlopen. In die korte tijd zet je een heleboel timeouts, volgens is dat niet wat je wil. En wat doen die functies fadeIn en fadeOut? Overigens werkt het voorbeeld wat ik gaf prima in FF hoor

[reddevil]

eeehm als je een while true uitvoert dan blijft natuurlijk je browser hangen.. hij blijft constant die functie uitvoeren zonder dat je iets tussendoor kan doen

[X-trace]

André schreef op woensdag 27 september 2006 @ 00:32:
En wat doen die functies fadeIn en fadeOut?

Die zorgen dat de opacity van een DIV word verhoogd/verlaagd in een aantal stappen, zodat er een fade effect ontstaat tussen 2 afbeeldingen.

De while(1) {} optie om de for-loop heen gooien is dus geen optie, aangezien hij dan timeouts blijft setten.
Ben nu bezig geweest met oplossing van André: functie opnieuw aanroepen binnen zichzelf. Hiervoor het ik ook een timeout gebruikt, welke pas ingaat wanneer laatste key uit array wordt bereikt. De timeout moet er dan voor zorgen dat dit pas gebeurd zodra laatste afbeelding een X aantal seconden zichtbaar was.

Code:

JavaScript:

function headerImage(imageArray,.....) {
    amount = imageArray.length;
    
    for(i=0;i<amount;i++) {
        fadeInTime = (i*(speed*1000))+(i*showSeconds);
        if(i%2==0) {
            setTimeout("set background",fadeInTime);
            setTimeout("fadeOut()",fadeInTime);
            setTimeout("fadeIn()",fadeInTime);
        } else {
            setTimeout("set background",fadeInTime);
            setTimeout("fadeOut()",fadeInTime);
            setTimeout("fadeIn()",fadeInTime);
        }
        if(i==(amount-1)) {
            setTimeout("headerImage('"+var1+"','"+var2+"',"+imageArray+");",fadeInTime);
        }
    }
}

Hiermee krijg ik de volgende javascript error:
Error: header is not defined
Source file: *****/javascript.js
Line: 83

regel 82 is waar de functie weer opnieuw wordt aangeroepen (regel16 in voorbeeld)

ps: let niet op de meegegeven var's bij heraanroep van functie. Heb even var1 en var2 gebruikt als voorbeeld. Indien dit allemaal wel van belang is, wil ik hele script hier wel posten...

[reddevil]

hrmz die foutmelding, komt die van IE af ? Want die doet soms wel moeilijk met regelnummers als je dit in een geinclude javascript hebt zitten.... want ik zie nergens 'header' staan los. Als je toch zeker weet dat je het goede hebt, kan je altijd even met een aantal alerts kijken wat de regel is die het probleem geeft.

[crisp]

Als imageArray daadwerkelijk een array is dan kan je die natuurlijk niet zo doorgeven in je setTimeout.

[X-trace]

reddevil schreef op donderdag 28 september 2006 @ 09:04:
hrmz die foutmelding, komt die van IE af ?

Nee, is met FF

crisp schreef op donderdag 28 september 2006 @ 10:07:
Als imageArray daadwerkelijk een array is dan kan je die natuurlijk niet zo doorgeven in je setTimeout.

Ahhh...misschien is dat dan het probleem. Waarom kun je die niet zo meegeven dan?! Ik ga het eens proberen!

[reddevil]

X-trace schreef op donderdag 28 september 2006 @ 10:14:
[...]

Ahhh...misschien is dat dan het probleem. Waarom kun je die niet zo meegeven dan?! Ik ga het eens proberen!

omdat je nu losse variabelen meegeeft ipv een array (wat eigenlijk 1 variabele is)

[ Voor 5% gewijzigd door reddevil op 28-09-2006 10:20 ]