[JS] setTimeout spoor compleet bijster - Softwareontwikkeling

donderdag 22 februari 2007 02:39

Acties:

TurboCharged Supra Driver

Topicstarter

Ik heb nu al een hele tijd lopen hannessen met een setTimeout die ik gewoonweg NIET werkend krijg. Al diverse syntaxen geprobeerd, browser tig keer moeten killen en ook vaak genoeg gewoon geen reactie uberhaupt. Zelfs volgens mij al iemand in een IRC kanaal weggejaagd :x

Anyways, hier mijn code:

code:

<html>
<head>
<script language=javascript>

function testfunctie(i)
{
    
    var kort = document.getElementById(i);
    var count = 1;
    while ( count < 101)
    {
        setTimeout("kort.innerHTML = count ;", 100);
        
        count = count  + 1
    }
}

</script>

</head>
<body>

<a href=# onClick="testfunctie('moveIt');">testlink</a>

<div id=moveIt>

0

</div>

</body>
</html>

Inderdaad een heel eenvoudig tellertje maar het houd me nu al een tijdje op. Het zal vast iets zijn waarvan ik achteraf zal denken " Owjah...." maar vooralsnog ben ik er nu ondertusen een uurtje of 2 a 2.5 mee bezig en ben ik er nog niet uit.

Iemand suggesties?

Toyota Supra 3.0i Turbo Targa in Panther Black Mica - 300D || 30D || 10-20 || 50mm 1.8 mk1 || 18-55 || 17-85 || 75-300 || Giottos || Manfrotto || Cullmann || Kenko || Hoya

donderdag 22 februari 2007 02:45

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Suggesties:
[list=1]
• Waar hoort mijn topic?
• Webdesign, Markup & Clientside Scripting Policy - Quickstart

PRG >> WEB

C.44 schreef op donderdag 22 februari 2007 @ 02:39:
Ik heb nu al een hele tijd lopen hannessen met een setTimeout die ik gewoonweg NIET werkend krijg. Al diverse syntaxen geprobeerd, browser tig keer moeten killen en ook vaak genoeg gewoon geen reactie uberhaupt. Zelfs volgens mij al iemand in een IRC kanaal weggejaagd :x

Roepen: "Hij doet 't niet" is nogal vaag. Mogen wij nu gaan raden wat de bedoeling is en wat er niet werkt?

Zowieso zet je nu in je lus meteen 100 timeouts in 1 klap, ik neem aan dat je na het verstrijken van 1 timeout de volgende wil zetten. Daarnaast moet je eens kijken naar setInterval, die is veel makkelijker in jouw geval.

Ik heb het even quick'n'dirty verbouwd:

HTML:

<html>
    <head>
        <script language=javascript>
            var count=0;
            var ival;
            
            function testfunctie() {
                ival = window.setInterval('doeIets()', 100);
            }
            
            function doeIets() {
                var kort = document.getElementById('moveIt');
                count += 1;
                kort.innerHTML = count;
                if (count>=100) window.clearInterval(ival);
            }
        </script>
    </head>
    <body>
        <a href="#" onClick="testfunctie();">testlink</a>
        <div id="moveIt">0</div>
    </body>
</html>

Tot slot wil ik je er nog even op wijzen dat het wel zo netjes is om attributen van HTML tags in quotes te zetten.

[ Voor 40% gewijzigd door RobIII op 22-02-2007 03:04 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 22 februari 2007 02:56

Acties:

C.44

TurboCharged Supra Driver

Topicstarter

Ok anders dan, ik kan op het linkje met de onClick klikken, maar er gebeurt niets. Haal ik het hele timergebeuren weg en zet ik er gewoon

code:

1	kort.innerHTML = a;

neer dan telt ie zo snel naar de 100 dat ik de overgang niet meer kan zien

Daarom wil ik er een timertje tussen zodat ik de overgang ook daadwerkelijk kan zien.

De bedoeling:
Ik wil graag weten hoe ik nu mijn setTimeout syntax moet aanpassen zodat die iig al eens klopt. Ik had ook graag geweten of er ergens anders in m'n "code" een hiaat zit waar dit hele ding zich aan stoort en alle medewerking weigert.

Context:
Niet van belang, tis gewoon een test van wat code

Zelf gezocht:
Diverse topics hier gelezen, zonder echt uitkomsten waar ik iets mee kan of met mijn tot nu toe beperkte kennis van JS kon aanpassen naar een eenvoudig tellertje. Ook diverse pagina's via google bekeken en JavaScript The Definitive Guide 5th Ed. erbij genomen. Alles zonder resultaat tot nu toe.

enniewees, ik krijg de syntax van setTimeout dus niet zodanig dat ie om de tiende seconde (100ms) de nieuwe waarde van a naar de div schopt.

Toyota Supra 3.0i Turbo Targa in Panther Black Mica - 300D || 30D || 10-20 || 50mm 1.8 mk1 || 18-55 || 17-85 || 75-300 || Giottos || Manfrotto || Cullmann || Kenko || Hoya

donderdag 22 februari 2007 03:02

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

C.44 schreef op donderdag 22 februari 2007 @ 02:56:
Ok anders dan, ik kan op het linkje met de onClick klikken, maar er gebeurt niets. Haal ik het hele timergebeuren weg en zet ik er gewoon
code:
1
kort.innerHTML = a;
neer dan telt ie zo snel naar de 100 dat ik de overgang niet meer kan zien Daarom wil ik er een timertje tussen zodat ik de overgang ook daadwerkelijk kan zien.

Ja, maar zoals ik al zei zet je in je lus in 1 klap 100 timeouts; die dus ook alle 100 net na elkaar worden afgevuurd. Je wil pas als de vorige timeout verstreken is weer een nieuwe tijd wachten (= nieuwe timeout zetten).

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 22 februari 2007 03:03

Acties:

C.44

TurboCharged Supra Driver

Topicstarter

Hmm dus zoals ik het nu lees is het dus niet mogelijk om de setTimeout binnen de zelfde functie te houden als de functie die de uitvoer heeft? Het was namelijk in eerste instantie mijn idee om een scriptje te maken waarmee ik door op een linkje te klikken een aantal stylesheetsettings kan veranderen (dat lukt me dan nog wel

) en vervolgens het divje z'n positie en dimensies te veranderen, een klein stukje animatie dus.

Toyota Supra 3.0i Turbo Targa in Panther Black Mica - 300D || 30D || 10-20 || 50mm 1.8 mk1 || 18-55 || 17-85 || 75-300 || Giottos || Manfrotto || Cullmann || Kenko || Hoya

donderdag 22 februari 2007 03:04

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Het kan wel:

HTML:

<html>
    <head>
        <script language=javascript>
            var count=0;
            
            function doeIets() {
                var kort = document.getElementById('moveIt');
                count += 1;
                kort.innerHTML = count;
                if (count<100) window.setTimeout('doeIets()',100);
            }
        </script>
    </head>
    <body>
        <a href="#" onClick="doeIets();">testlink</a>
        <div id="moveIt">0</div>
    </body>
</html>

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 22 februari 2007 03:15

Acties:

C.44

TurboCharged Supra Driver

Topicstarter

Om het geheel nog beetje lastiger te maken, is het ook een mogelijkheid om iets dergelijks in een for loopje te zetten ? Ik heb dat net even geprobeerd, maar uiteraard maak ik dan weer een godgruwelijke hoeveelheid timers tegelijk aan en word firefox weer afgeschoten. Al wel heel erg bedankt voor je hulp

[ Voor 6% gewijzigd door C.44 op 22-02-2007 03:17 ]

Toyota Supra 3.0i Turbo Targa in Panther Black Mica - 300D || 30D || 10-20 || 50mm 1.8 mk1 || 18-55 || 17-85 || 75-300 || Giottos || Manfrotto || Cullmann || Kenko || Hoya

donderdag 22 februari 2007 03:29

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

C.44 schreef op donderdag 22 februari 2007 @ 03:15:
Om het geheel nog beetje lastiger te maken, is het ook een mogelijkheid om iets dergelijks in een for loopje te zetten ?

Ik zie niet waarom je dat zou willen. Mocht je per-se een for-loopje willen gebruiken dan kun je natuurlijk al die timeouts tegelijk aanmaken, maar de timeout waarde zelf steeds met 100 ophogen

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 22 februari 2007 03:35

Acties:

C.44

TurboCharged Supra Driver

Topicstarter

Nou om het duidelijker te maken. Ik wilde eigenlijk gisteravond rond een uur of tien een hidden div zichtbaar maken (dat lukt me dan nog), vervolgens de top positie die ik in de css heb aangegeven veranderen, daarna de width en vervolgens de height en de padding nog beetje bijwerken. Bij wijze van experiment.

Ben ondertussen al weer druk aan het proberen geslagen daar niet van

loop alleen even tegen de timers aan weer.

Toyota Supra 3.0i Turbo Targa in Panther Black Mica - 300D || 30D || 10-20 || 50mm 1.8 mk1 || 18-55 || 17-85 || 75-300 || Giottos || Manfrotto || Cullmann || Kenko || Hoya

donderdag 22 februari 2007 10:30

Acties:

crisp

Devver

Pixelated

Ik denk dat je gewoon nog niet helemaal begrijpt hoe timers werken in javascript.
Met timers pauseer je de executie van de rest van je script niet, er wordt enkel een timer gestart en vervolgens zal de rest van je script gewoon verder doorlopen worden. Als uiteindelijk de timer afloopt en de javascript engine op dat moment idle is dan wordt de handler gedefinieerd in je timer aangeroepen (of in het geval van een expressie die expressie geevalueerd).

Note overigens het verschil tussen een functie-reference als handler en een expressie mbt scope:

JavaScript:

function timer()
{
    var foo = 'bar';
    setTimeout('alert(foo)', 1000);
}

zal niet werken; aangezien het een expressie is die geevalueerd moet worden is er geen expliciete scope voor de executie-context

dit werkt wel (closure):

JavaScript:

function timer()
{
    var foo = 'bar';
    var handler = function()
    {
        alert(foo);
    }
    setTimeout(handler, 1000);
}

Praktisch voorbeeldje van een timeout functie die zichzelf weer aanroept:

JavaScript:

function timer()
{
    var i = 0;
    var handler = function()
    {
        window.status = ++i;
        if (i < 100)
            setTimeout(arguments.callee, 100);
    }
    setTimeout(handler, 100);
}
timer();

[ Voor 48% gewijzigd door crisp op 22-02-2007 10:49 ]

Intentionally left blank

donderdag 22 februari 2007 10:51

Acties:

C.44

TurboCharged Supra Driver

Topicstarter

Dus als ik het goed begrijp doet ie eerst de eerste regel, dan zet start er bijvoorbeeld op regel 2 een timer die word op een zijspoor gezet en ondertussen gaat de engine verder met regel 3 4 5 enzovoorts, en als ergens tussendoor de timer afloopt word het gedeelte dat vasthangt aan de timer pas uitgevoerd.

Als dat zo is kan ik dan niet gewoon meerdere functies maken en als ik dan wel een echte pauze wil inlassen voordat andere code word gestart gewoon een timer starten met een verwijzing naar een functie met het volgende stuk code ?

Toyota Supra 3.0i Turbo Targa in Panther Black Mica - 300D || 30D || 10-20 || 50mm 1.8 mk1 || 18-55 || 17-85 || 75-300 || Giottos || Manfrotto || Cullmann || Kenko || Hoya

donderdag 22 februari 2007 10:56

Acties:

crisp

Devver

Pixelated

C.44 schreef op donderdag 22 februari 2007 @ 10:51:
Dus als ik het goed begrijp doet ie eerst de eerste regel, dan zet start er bijvoorbeeld op regel 2 een timer die word op een zijspoor gezet en ondertussen gaat de engine verder met regel 3 4 5 enzovoorts, en als ergens tussendoor de timer afloopt word het gedeelte dat vasthangt aan de timer pas uitgevoerd.

Grotendeels correct, enkel zal de timer-code pas uitgevoerd worden als de javascript-engine idle is aangezien javascript zeg maar single-threaded is.

Als dat zo is kan ik dan niet gewoon meerdere functies maken en als ik dan wel een echte pauze wil inlassen voordat andere code word gestart gewoon een timer starten met een verwijzing naar een functie met het volgende stuk code ?

inderdaad, je zal dat soort dingen moeten uitsplitsen. En of je dat met aparte functies doet of met nifty anonymous functies en closures maakt niet zoveel uit

Intentionally left blank

donderdag 22 februari 2007 10:57

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

C.44 schreef op donderdag 22 februari 2007 @ 10:51:
Als dat zo is kan ik dan niet gewoon meerdere functies maken en als ik dan wel een echte pauze wil inlassen voordat andere code word gestart gewoon een timer starten met een verwijzing naar een functie met het volgende stuk code ?

RobIII in "[JS] setTimeout spoor compleet bijster"

Zoals ik al meermalen heb gezegd; je kunt toch gewoon de volgende timeout schedulen op het moment dat de vorige is afgelopen? Zo moeilijk is dat toch niet? (Zeker niet na crisp's veel nettere voorbeelden)
Ah, ik begreep je vraag niet goed

[ Voor 3% gewijzigd door RobIII op 22-02-2007 10:58 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

zaterdag 24 februari 2007 04:20

Acties:

C.44

TurboCharged Supra Driver

Topicstarter

Het is me ondertussen gelukt om een stukje te kalken met een aantal timeouts. Nu ik erover nadenk is het ook wel een beetje logisch, had eerst nog even nodig om uit te vogelen waarom er nu ineens 2 timeouts.

Alleen ben ik nu even aan het kijken hoe ik nu precies m'n divje kan "animeren". Ik wil em eerst 59 keer een pixel naar beneden en dan wil 14 keer een pixel aan de boven en onderkant eraan padden. Maar met padden verandert wel het midden van je cel. Die moet dus weer iets meer dan 7 pixels omhoog om de text die in het divje staat bij het padden op dezelfde plek te houden.

Zal hier even de code plempen:

code:

<script language=JavaScript>



function testfunc(i)
{
    var testje = document.getElementById(i).style;
    
    

    var a = 40;
    var movedown = function()
    {
        testje.top = a++;
        if (a < 100)
        {
            setTimeout(arguments.callee, 10);
        }
    }
    setTimeout(movedown, 1);
    
    var b = 0;
    var expandPadding = function()
    {
        c = b + " 0 " + b + " 0";

        testje.padding = c;
        b++
        if (b < 15)
        {
            setTimeout(arguments.callee, 100);
        }
    }
    setTimeout(expandPadding, 701);

    var d = 100 ;
    var correctionForPadding = function()
    {
        testje.top = d;
        d = d - 1;
        if (d > 96)
        {
            setTimeout(arguments.callee, 10);
        }
    }
    setTimeout(correctionForPadding, 1700);


    
}

</script>

Nu vraag ik me af hoeveel tijd (in ms) heeft het geheel nodig om elke handeling te doorlopen ? Ik heb eraan proberen te tellen, maar uiteindelijk dan lijkt het erop dat of de volgende handeling te vroeg of te laat begint. Nu lijkt me toch dat zoiets uit te rekenen moet zijn. Toch ?

Toyota Supra 3.0i Turbo Targa in Panther Black Mica - 300D || 30D || 10-20 || 50mm 1.8 mk1 || 18-55 || 17-85 || 75-300 || Giottos || Manfrotto || Cullmann || Kenko || Hoya