Onderdeel script begrijp ik niet

Status
Niet open voor verdere reacties.

bordeel

Nieuwe gebruiker
Lid geworden
12 mrt 2013
Berichten
1
Ik ben sinds enkele weken mezelf aan het verdiepen in Javascript/Jquery, maar ik begrijp een onderdeel van mijn code niet.
Klinkt raar, maar aan de hand van een timer functie die ik gevonden had ben ik ermee gaan experimenteren.

Dit stuk begrijp ik niet van de code:
Wat gebeurt hier nu precies?
Mijn lezing: functie timer die bevat en plaatst een getal dat wordt afgerond. Naam mijn idee 0 ? ALS ik dat goed begrijp, wat doet hij met het getal 0 dan verder in het script?
Code:
function timer(total_sec) { // Functie gemaakt met de naam timer
		var seconds = Math.floor(total_sec); 
		//var currentTimeString = seconds;

  		return seconds;
	}

En dit is de totale code:
Code:
var aantal_sec = 0; // Variabele gemaakt met aantal seconden = 0. De klok begint bij 0 te tellen
	
	
	function timer(total_sec) { // Functie gemaakt met de naam timer
		var seconds = Math.floor(total_sec); 
		//var currentTimeString = seconds;

  		return seconds;
	}


	var Interval = setInterval(function() { // setInterval function wordt uitgevoerd. En wordt uitgevoerd elke seconde
 	aantal_sec = aantal_sec + 1; // Bij aantal_sec wordt elke seconde 1 bij opgeteld
  	$('#timer').html(timer(aantal_sec) + " sec");// het aantal seconden wordt weergeven in de div #timer, plus de tekst "sec" achter de counter
  
  	if(score == 4){
  		clearInterval(Interval); //Functie blijft uitgevoerd worden, totdat clearInterval wordt gebruikt
  		$(".popup").css("display", "block");//popup wordt zichtbaar
  	}
  	
  	if (aantal_sec == 10 && score != 4){ // Als aantal seconden 10 is, en de score is niet gelijk aan 4. Dan heb je verloren
  		clearInterval(Interval);
  		$(".popup2").css("display", "block"); // Toon verloren div
  	}
	}, 1000); // 1000 milliseconden = 1 seconde
 
Mijn lezing: functie timer die bevat en plaatst een getal dat wordt afgerond.
Correct: als je de functie aanroept, moet je er een getal in stoppen (dat wordt dan even "total_sec" genoemd), en er komt de waarde van de variabele "seconds" uit. En deze output zit aan de input vast via de afronding: var seconds = Math.floor(total_sec);

Naar mijn idee 0 ?
Nop, maar bijna: de uitkomst is afhankelijk van wat je er in stopt. Als je er 0 in stopt komt er ook 0 uit. Als je er 15.789 in stopt komt er 15 uit, en als je er 3.00 in stopt komt er 3 uit.
  • Math.floor = naar beneden afronden op eerstvolgende hele getal, en weergeven zonder komma (en nullen achter de komma).
Als ik dat goed begrijp, wat doet hij met het getal 0 dan verder in het script?
Wat hier de timer-functie wordt genoemd, is eigenlijk geen timer, maar alleen een afronder.
De echte functie is de var Interval = setInterval(function() {...}, 1000).

Die begint (na het eerste interval van 1000ms, dus pas na 1 sec.) met aantal_sec = aantal_sec + 1; en bij de start is de variabele aantal_sec=0.
Dus het nieuwe aantal_sec= 0+1 = 1.

Dan komt de functie: $('#timer').html(timer(aantal_sec) + " sec");. *)

Die pakt de <div id="timer"></div>, en schrijft als html binnen die tags: de uitkomst van de functie timer(aantal_sec) plus het woord "sec".
Ons aantal_sec was 1, en stop je die in de afronder, dan komt er ook 1 uit. Er komt dus: <div id="timer">1 sec.</div> te staan.

Dan worden de if's van kracht > zijn die niet het geval, dan gaat het interval van 1 seconde in, en wordt de setInterval-functie opnieuw uitgevoerd.
Maar in de nieuwe ronde is de aantal_sec ook weer aantal_sec + 1, dus nu 2 > en afgerond ook 2.
En vanaf nu staat er "2 sec." in de <div id="timer">.

Enz.: net zolang totdat er een "if" geraakt wordt, want dan gebeuren de opdrachten die in de "if" staan.

======
Volgens mij gaat het net zo goed als je geen aparte timer()-functie maakt, maar de afrondingsbewerking meteen in de hoofdfunctie stopt. Dat maakt het ook korter en overzichtelijker:
[JS]var aantal_sec = 0;

var Interval = setInterval(function() {
aantal_sec = aantal_sec + 1;
var seconds = Math.floor(aantal_sec);
$('#timer').html(seconds + " sec");

if ... enz.
}, 1000);[/JS]

Met vriendelijke groet,
CSShunter
_______
*) Dat is een stukje jQuery javascript-code, der rest is gewoon javascript.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan