Joshua822, ik weet precies wat er fout gaat. En ik zal ook stap voor stap uitleggen wat er mis gaat, en hoe het in het vervog beter kan.
Ook heb ik gisteren nog een filmpje gekeken over optimalisatie (
http://www.youtube.com/watch?v=mHtdZgou0qU&feature=related) en de conclusies daaruit heb ik ook hierin verwerkt.
EDIT: Te laat alweer...
Maar ik zal toch nog even een uitgebreide uitleg schrijven
De "Best practices" die ik heb geleerd.
- Zet je javascript in de <head> van je HTML of helemaal onderaan in de <BODY>
- Zet tussen de <script> tags: //<[CDATA[ en ]]> dit is voor oude browsers
- Declareer alle variabelen bovenaan iedere functie (de variabelen die je in deze functie (en eventueel in een subfunctie) nodig hebt). Gebruik daarvoor maar éénmaal het 'var' keyword.
- Doe zo min mogelijk DOM calls (document.getElement**), dus het liefst niet elke interval, maar maak tevoren een variabele aan, waar je dit element in stored.
- Gebruik zo min mogelijk global variables (heb ik hierin nog niet verwerkt), die kunnen namelijk door externe scripts overschreven worden (cross site scripting)
- In dit geval is "setInterval" beter dan "setTimeOut", omdat het een interval betreft.
- De eerste parameter in setInterval en setTimeOut moet een functie zijn. Dus zonder (), omdat anders de functie meteen wordt uitgevoerd. Wil ja extra parameters aan de functie meegeven, dan kun je het volgende gebruiken:
var somevar = 'a';
setInterval(function(){ doChronometer(somevar) ; }, 1000);
- Zet in de functie start() ook een return true en gebruik (onclick="return start();") zodat onclick ook weet dat de code juist (zonder fouten) is uitgevoerd.
<!DOCTYPE html>
<html>
<head>
<title>A Javascript chronometer</title>
<!-- Some meta data to be better findable by search engines -->
<!--
<meta name="description" content="" />
<meta name="keywords" content="" />
-->
<!--
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="style/style.css" />
-->
<!--
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-->
<!-- Between the script tags //<![CDATA[....]]> is needed so the browsers do not parse this code as HTML -->
<script type="text/javascript">
//<[CDATA[
var interval,
interval_delay = 1000,
element = undefined;
function start () {
element = document.getElementById ( "number_field" );
element.value = parseInt(element.value) | 0;
clearInterval(interval); //In the case that start is pushed twice
interval = setInterval(doChronometer, interval_delay);
return true;
}
function stop () {
clearInterval(interval);
}
function doChronometer () {
element.value = parseInt(element.value) + 1;
}
//]]>
</script>
</head>
<body>
<form>
<input type="button" value="Start chronometer!" onclick="return start();" />
<input type="text" id="number_field" />
</form>
</body>
</html>
