Koden nedan hittade jag på nätet någonstans. Det är en en progress mätare som räknar upp till en viss tid. Vad jag undrar är hur den fungerar då den inte har en loop i sig?
Vad händer igentligen när man ropar på samma funktion som man är i?
Eftersom värdet i step inte förloras antar jag att när man ropar på samma funktion så motsvarar det något liknande en 'goto'?
Vore glad om nån kunde förklara progress() funktionen nedan :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style>
* { font-family: "Arial", sans-serif; }
#wrap { text-align: center; }
#bar {
margin: 0 auto;
width: 250px;
text-align: left;
border: 1px solid black;
}
#progress {
width: 0;
background: lightblue;
}
</style>
<script>
var time = 10000; // 10 secs
var steps = 50; // Five per second
var step = 1;
function progress() {
var bar = document.getElementById( "bar");
var aStep = (bar.offsetWidth -2) /steps;// 2px border removed from width
var x = Math.round( aStep *step);
var progress = document.getElementById( "progress");
progress.style.width = x +"px";
step++;
if( step > steps) redir();
else setTimeout( "progress();", time /steps);
}
function redir() {
alert( "Redirecting now!");
}
</script>
</head>
<body>
<div id='wrap'>
Progress?
<div id='bar'><div id='progress'></div></div>
<br>
<a href='#' onClick='progress();'>Click here to start</a>
</div>
</body>
</html>
TravoniMedlem sedan okt. 20041 556 inlägg [blue]var time = 10000; // 10 secs
var steps = 50; // Five per second
var step = 1;[/blue]
function progress() {
[red]//Elementet "bar" i detta fall en div[/red]
var bar = document.getElementById( "bar");
[red]//"aStep" = Bredden på "bar" -2(ramen), delat på steps[/red]
var aStep = (bar.offsetWidth -2) /steps;// 2px border removed from width
[red]// "x" = "aStep" gånger step (som är ett(1) i första fallet) avrundat till närmsta heltal. (Eftersom att pixlar inte kan vara decimaltal)[/red]
var x = Math.round( aStep *step);
[red]//Elementet "progress" även i detta fall en div[/red]
var progress = document.getElementById( "progress");
[red]//Sätt ny bredd på "progress"-elementet[/red]
progress.style.width = x +"px";
[red]//Öka "step" med ett(1)[/red]
step++;
[red]//Här kommer lopen in! (Den kör funktionen "rekursivt" alltså kallar på sig själv.)
// Om "step" är större än steps(50) kör funktionen redir()[/red]
if( step > steps) redir();
[red]//Annars kör funktionen progress() igen, med en "tidsförskjutning" som är 10sekunder delat med "steps"[/red]
else setTimeout( "progress();", time /steps);
}
function redir() {
alert( "Redirecting now!");
}
Anledningen till att värdet inte återställs är att värdet ifrån början är satt globalt. Deklareras utanför/innan funktionen.
Tack!!
Med andra ord så när en funktion kallar på sig själv slutar den att exekvera resterande kod och hoppar till starten på funktionen (sig själv) ?
sl0kMedlem sedan maj 2005562 inlägg
Danielkun skrev:
Med andra ord så när en funktion kallar på sig själv slutar den att exekvera resterande kod och hoppar till starten på funktionen (sig själv) ?
När funktionen kallar på en annan funktion (ex sig själv) kommer den hoppa dit och exekvera den funktionen. När den kallade funktionen sedan är klar kommer exekveringen fortsätta i första funktionen.
Dvs funktionen avbryts inte.
/red
När en funktion kallar på sig själv kallas det rekursion. Rekursion kan vara ett effektivt sätt att lösa vissa specifika uppgifter på. Risken för stor minnesanvändning finns dock då anropsstacken byggs på för varje iteration.
Ex. En funktion för att beräkna fakultet.
function nfakultet (n) {
if (n<=0)
return 1;
else
return n * nfakultet(n-1);
}
