Nieuws:

We zijn er weer.

Na lange tijd van afwezigheid zijn we er weer  :laugh:
We hebben alle wachtwoorden gereset, je oude wachtwoord werkt niet meer.Je moet via het "wachtwoord vergeten"-linkje je wachtwoord resetten. Je krijgt hiervoor een mailtje op het adres dat je bij ons geregistreerd hebt.

De komende tijd zijn we nog druk bezig om de rest van de site op te bouwen, dus het kan zijn dat sommige onderdelen (tijdelijk) niet werken.

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Auteur Topic: [Opgelost][Javascript]Timer script werkt niet  (gelezen 3262 keer)

Offline Joshua822

  • Documentatieteam
  • Steunpunt: Nee
[Opgelost][Javascript]Timer script werkt niet
« Gepost op: 2010/12/19, 20:42:13 »
Hallo allemaal!

Ik ben momenteel voor het leren van Javascript aan het werken aan een scriptje dat een chronometer nabootst, maar het werkt niet. De bedoeling is dat er gewoon in het tekstvak elke seconde een getal komt te staan dat met één verhoogd is, maar voor een reden die ik niet ken werkt het niet. Dit is mijn script:
<html>
<head>
<title>
A Javascript chronometer
</title>
</head>
<body>
<script type="text/javascript">
var Timeout;
var Count = 0;
var ChronometerOn = 0;

function checkChronometer ( )
{
if ( chronometerOn == 0 )
{
chronometerOn = 1;
doChronometer ( );
}
}
function doChronometer ( )
{
document.getElementById ( "number_field" ).value = Count;
Count = Count + 1;
Timeout = setTimeout ( "doChronometer()", 1000 );
}
</script>
<form>
<input type="button" value="Start chronometer!" onclick="checkChronometer()" />
<input type="text" id="number_field" />
</form>
</body>
</html>
Opmerking: ik weet dat het nu een oneindige lus is, en dat er nog geen startknop is, dat zal ik nog implementeren als ik dit gedeelte aan het werk heb.

Weet er dus iemand raad? Alvast bedankt! :D
« Laatst bewerkt op: 2010/12/20, 14:03:53 door Joshua822 »

Offline Ronnie

  • Artworkteam
    • ronnie.vd.c
  • Steunpunt: Nee
Re: [Javascript]Timer script werkt niet
« Reactie #1 Gepost op: 2010/12/19, 22:16:54 »
Het volgende zou moeten werken:

var interval,
    interval_delay = 1000,
    element = document.getElementById ( "number_field" );

function start () {
    interval = setInterval(doChronometer, interval_delay);
}

fuction stop () {
    clearInterval(interval);
}

function doChronometer () {
    element.value += 1;
}

Ik heb ook nog een andere opmerking: Het is vaak een persoonlijke voorkeur waar je de "{" neerzet. Doe je dat achter ")" of op de volgende regel.

Bij javascript zit er een groot verschil in, zodra je een klein foutje in de code zit.
Lees vooral eens deze 'gids' door: http://javascript.crockford.com/code.html

In dit filmpje (duurt wel een tijdje, maar is erg leerzaam) wordt ook uitgelegd wat precies de gevolgen zijn van de "{" op een nieuwe regel zetten: http://www.youtube.com/watch?v=hQVTIJBZook
« Laatst bewerkt op: 2010/12/20, 13:48:23 door Ronnie »
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal

Offline SeySayux

  • Lid
    • SeySayux.net
  • Steunpunt: Nee
Re: [Javascript]Timer script werkt niet
« Reactie #2 Gepost op: 2010/12/20, 11:51:54 »
Het volgende zou moeten werken:

var interval
    interval_delay = 1000;

function start () {
    interval = setInterval(doChronometer, interval_delay);
}

fuction stop () {
    clearInterval(interval);
}

function doChronometer () {
document.getElementById ( "number_field" ).value += 1;
}

Ik heb ook nog een andere opmerking: Het is vaak een persoonlijke voorkeur waar je de "{" neerzet. Doe je dat achter ")" of op de volgende regel.

Bij javascript zit er een groot verschil in, zodra je een klein foutje in de code zit.
Lees vooral eens deze 'gids' door: http://javascript.crockford.com/code.html

In dit filmpje (duurt wel een tijdje, maar is erg leerzaam) wordt ook uitgelegd wat precies de gevolgen zijn van de "{" op een nieuwe regel zetten: http://www.youtube.com/watch?v=hQVTIJBZook
Kan je even dan uitleggen wat het verschil is? Volgens mij is er geen.
I use a Unix-based system, that means I'll get laid as often as I have to reboot.
LibSylph
SeySayux.net

Offline Rachid

  • Vertaalteam
    • rachidbm
    • Mijn blog
  • Steunpunt: Nee
Re: [Javascript]Timer script werkt niet
« Reactie #3 Gepost op: 2010/12/20, 12:06:35 »
Dat wordt hier uitgelegd: http://www.youtube.com/watch?v=hQVTIJBZook#t=30m35s
Vanaf minuut 30 dus ;)
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Offline Joshua822

  • Documentatieteam
  • Steunpunt: Nee
Re: [Javascript]Timer script werkt niet
« Reactie #4 Gepost op: 2010/12/20, 13:43:31 »
Bedankt voor de antwoorden!

Ik heb ondertussen het tellen kunnen laten werken :) Dit heb ik kunnen doen door alle witruimte weg te doen en de accolades altijd op dezelfde regel als de functiedefinitie of conditioneel statement te plaatsen ( ik zal de video en de gelinkte pagina morgen lezen, dan heb ik de tijd om het rustig en in één stuk te doen ).

Maar nu is het probleem dat alleen het tellen werkt. De timing klopt namelijk niet :( De teller telt veel te snel! Ik kan nog niet eens het getal zeggen of het is al twee getallen verder!

Ik kan in mijn call naar setTimeout echt geen fout vinden. Ik heb al veel gezocht met Google, maar mijn call en de anderen die ik vind zien er toch altijd hetzelfde uit. Ook het opslaan van de waarde voor het interval in een aparte variabele was geen oplossing.

Hier is mijn code:
<html>
<head>
<title>
A Javascript chronometer
</title>
</head>
<body>
<script type="text/javascript">
var Timeout;
var Interval = 1000;
var Count = 0;
var ChronometerOn = 0;

function doChronometer(){
document.getElementById("number_field").value=Count;
Count=Count+1;
Timeout = setTimeout(doChronometer(), 100000);
}
                        function checkChronometer(){
if(ChronometerOn===0){
ChronometerOn=1;
doChronometer();
}
}
</script>
<form>
<input type="button" value="Start chronometer!" onclick="checkChronometer()" />
<input type="text" id="number_field" />
</form>
</body>
</html>

Offline Brumm3l

  • Lid
  • Steunpunt: Nee
Re: [Javascript]Timer script werkt niet
« Reactie #5 Gepost op: 2010/12/20, 13:48:18 »
Als ik het goed heb, is de tijd in de waarde die je hebt aangegeven in miliseconden, niet in seconden. Dat kan het te snelle tellen verklaren.

Offline Joshua822

  • Documentatieteam
  • Steunpunt: Nee
Re: [Javascript]Timer script werkt niet
« Reactie #6 Gepost op: 2010/12/20, 13:50:31 »
Nee, dat is het niet. Als ik de waarde verhoog of verlaag heeft het geen effect.

Offline Rachid

  • Vertaalteam
    • rachidbm
    • Mijn blog
  • Steunpunt: Nee
Re: [Javascript]Timer script werkt niet
« Reactie #7 Gepost op: 2010/12/20, 13:58:13 »
Het beste is om dan te zoeken naar voorbeelden van setTimeOut in Javascript.

Die functienaam moet tussen aanhalingstekens:
Timeout = setTimeout("doChronometer()", 1000);

Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Offline Joshua822

  • Documentatieteam
  • Steunpunt: Nee
Re: [Javascript]Timer script werkt niet
« Reactie #8 Gepost op: 2010/12/20, 14:03:23 »
Ik heb het! :D Het probleem was dat
Timeout = setTimeout(doChronometer(), 1000);Timeout = setTimeout(doChronometer, 1000);moest zijn :P

Offline Rachid

  • Vertaalteam
    • rachidbm
    • Mijn blog
  • Steunpunt: Nee
Re: [Opgelost][Javascript]Timer script werkt niet
« Reactie #9 Gepost op: 2010/12/20, 14:05:18 »
Of zonder haakjes inderdaad!
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Offline Ronnie

  • Artworkteam
    • ronnie.vd.c
  • Steunpunt: Nee
Re: [Javascript]Timer script werkt niet
« Reactie #10 Gepost op: 2010/12/20, 14:07:27 »
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>
« Laatst bewerkt op: 2010/12/20, 14:31:22 door Ronnie »
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal

Offline Ronnie

  • Artworkteam
    • ronnie.vd.c
  • Steunpunt: Nee
Re: [Opgelost][Javascript]Timer script werkt niet
« Reactie #11 Gepost op: 2010/12/20, 16:06:30 »
Bij het volgende (verbeterde) voorbeeld heb ik de globale variabelen tot een minimum beperkt (1 in totaal - om bij te houden of hij moet starten of stoppen). De rest zijn allemaal ondergebracht in de functie startstop.

Ik moet toegeven dat de code er erg ingewikkeld uitziet, maar dit is volgens de javascript guru's volgens mij de beste methode.

<!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 = null;
                
            function startstop () {
                var element = document.getElementById( "number_field" ),
                    interval_delay = 1000,
                    counter = (function () {
                        var elem = element,
                            count = 0;
                        return {
                            'count': function () {
                                count += 1;
                                elem.value = count;
                            }
                        };
                    }());
                interval = interval ? clearInterval(interval) : setInterval(counter.count, interval_delay);
                element.value = 0;
                return true;
            }
        //]]>
        </script>
    </head>
    <body>
        <form>
            <input type="button" value="Start chronometer!" onclick="return startstop();" />
            <input type="text" id="number_field" />
        </form>
    </body>
</html>

Ik heb als interesse voor mij ook nog eens naar de performance gekeken tov de code van Josua822, vooral omdat het mijn eerste optimalisatie is.

Het volgende kreeg ik eruit door een triplo (3x) de timing te meten tot 8 seconden op de teller. (gedaan met firebug profiler)
Daaruit kwam dat bij mijn de initialisatie(7,604ms) trager was dan die van joshua (0,296ms). Dus een verlies van ongeveer 7ms
Daarna, bij elke interval koste mijn script 2,149ms en die van Joshua 3,134ms een verschil van 1 ms (30%)

Dus korter dan 7 seconden, dan zou het script van Joshua beter zijn voor de CPU, na de 7 seconden, dan is mijn script 30% zuiniger.

Omdat dit script maar een heel klein deel van de CPU kracht gebruikt, is dit verschil nu zeker niet merkbaar, maar wanneer een website groter wordt, gaat dit verschil zeker mee spelen.
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal