[js] controleren op een bepaalde tijd - Softwareontwikkeling

maandag 5 januari 2004 19:28

Acties:

Topicstarter

Ik heb een soort agenda-script in PHP. Nou wil ik graag dat dit script een popupje laat zien op het moment dat de huidige tijd gelijk is aan een bepaald agenda punt.
Dit kan ik op 2 manieren oplossen:

1. In een verborgen framepje een php pagina om de minuut laten kijken in de database of er toevallig een agendapunt is dat <= aan de huidige tijd en zo ja, dat popupje tonen
2. bij het laden van de pagina alle agenda-punten (van die dag) in een javascriptje zetten en javascript het controleren verder af laten handelen.

Het grote voordeel van 2 boven 1 vind ik dat het realtime is en dat je niet telkens een pagina hoeft te refreshen.
(btw, voor een eventueel verschil in lokale tijd en servertijd wordt al gecompenseerd)

Dus, ik ben met js aan de slag gegaan en ben tot dit (test-)scriptje gekomen:

HTML:

<html>
<head>
 <title></title>
 <script language="javascript" type="text/javascript">
 var agendaPoints = [];
 agendaPoints[0] = 1073315800050;
 agendaPoints[1] = 1073316000050;
 agendaPoints[2] = 1073316500050;
 agendaPoints[3] = 1073317000050;
 function curTime()
 {
    var runTime = new Date(); 
    var unixstamp = runTime.getTime();
    return unixstamp;
 }
 function checkTime(arr)
 {
    for (var i in arr)
    {
        while (curTime() < arr[i])
        {
            // we do nothing
        }
        alert ('curTime = '+curTime()+'\nAgendaPoint = '+arr[i]);
    }
    alert ('dat was het laatste agendapunt');
 }
 </script>
</head>

<body onLoad="checkTime(agendaPoints);">


</body>
</html>

Echter, hier gaat m'n browser (mozilla) redelijk hard van over z'n nek. Hij geeft na een tijdje aan dat die javascript code er voor zorgt dat ie veel te langzaam draait (wat een understatement is, want hij staat gewoon compleet frozen) en vraagt of ik 'm wil afsluiten. De bottleneck zit 'm vrijwel zeker in die while-loop; ik heb alleen geen idee hoe ik dit anders op zou kunnen lossen. Kan iemand me een kickje in de goede richting geven?

maandag 5 januari 2004 19:30

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

setTimeout al eens bekeken?

Die while lus, waarin je "nothing" doet is echt van de gekke...

/edit
of wat crisp zegt ja

/edit 2:

JavaScript:

1
2
3

 function curTime()  {
    return new Date().getTime();
 }

is korter

[ Voor 135% gewijzigd door RobIII op 05-01-2004 19:35 ]

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

maandag 5 januari 2004 19:32

Acties:

crisp

Devver

Pixelated

probeer het eens met een setTimeout of setInterval, vrij logisch dat een browser het niet fijn vind als je elke clockcycle de tijd wilt gaan vergelijken

Intentionally left blank

maandag 5 januari 2004 19:36

Acties:

marty

Topicstarter

crisp schreef op 05 januari 2004 @ 19:32:
probeer het eens met een setTimeout of setInterval, vrij logisch dat een browser het niet fijn vind als je elke clockcycle de tijd wilt gaan vergelijken

Ja, daar kwam ik dus ook achter.
Voor jullie is het waarschijnlijk het domste van het domste, maar ik ben nou eenmaal geen JSer. Dit was het beste wat ik zelf kon bedenken. Had al wel wat gezocht met google en de search hier enzo, maar was die setTimeOut functie nog niet tegengekomen. Zal er ff naar gaan kijken

maandag 5 januari 2004 19:40

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

voorbeeldje om je op weg te helpen:

HTML:

<html>
<head>
    <title>test</title>
    <script language="JavaScript">
    function dispTime() {
        document.getElementById('test').innerText = new Date().getTime();
    }
    </script>
</head>

<body onload="window.setInterval('dispTime()',1000);">

<span id="test"></span>

</body>
</html>

voor het idee

alleen getest in IE6....

[ Voor 21% gewijzigd door RobIII op 05-01-2004 19:41 ]

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

maandag 5 januari 2004 20:36

Acties:

marty

Topicstarter

Aan die setInterval had ik niet zoveel, want kan er moeilijk van uitgaan dat alle agendapunten met een exact gelijk interval er tussen plaats gaan vinden

Dus ben met setTimeout aan de slag gegaan en dat lijkt inderdaad precies zo te werken als ik wil. Waar ik nu alleen tegenaan loop is dat ik variabelen wil gebruiken in die SetTimeout functie, alleen dat pikt ie niet. Dat moeten persee globale variabelen zijn. Dus ben nu nog wat aan het klooien hoe ik dat op moet lossen. Maar ik krijg met de search hier alleen lelijke foutmeldingen op m'n beeldscherm, dus zal ff moeten wachten tot die het weer doet

want daar ben ik toch wel erg afhankelijk van.. .
Maar ik zit in iedergeval op de goede weg. Als ie af is post ik 'm uiteraard even.

dinsdag 6 januari 2004 01:56

Acties:

marty

Topicstarter

Hier is m'n uiteindelijke code:

HTML:

<html>
<head>
 <title></title>
 <script language="javascript" type="text/javascript">
 var agendaPoints = [];
 agendaPoints[0] = 1073340250000;
 agendaPoints[1] = 1073340300000;
 agendaPoints[2] = 1073340350000;
 var agendaLinks = [];
 agendaLinks[0] = 'testpop?id=1';
 agendaLinks[1] = 'testpop?id=2';
 agendaLinks[2] = 'testpop?id=3';

 totalPoints = agendaPoints.length;
 curPIndex = 0;

 function curTime()
 {
    return new Date().getTime();
 }
 function checkTime()
 {
    currentTime = curTime();
    if (agendaPoints[curPIndex] < currentTime)
    {
        alert('Deze is al geweest: '+agendaPoints[curPIndex]);
        if ((curPIndex+1) < totalPoints)
        {
            curPIndex++;
            checkTime();
        }
    }
    else
    {
        var verschil = agendaPoints[curPIndex] - currentTime;
        alert('wachten op volgende agendapunt is '+verschil+' mSeconden');
        setTimeout('showPoint()', verschil)
    }
 }

 function showPoint()
 {
    alert(agendaLinks[curPIndex]);
    if ((curPIndex+1) < totalPoints)
    {
        curPIndex++;
        checkTime();
    }
 }

 alert('totalPoints: '+totalPoints+' huidige tijd: '+curTime());
 </script>
</head>

<body onLoad="checkTime();">

</body>
</html>

Dit werkt perfect zo, dus kan ik nu fijn gaan ombouwen voor m'n script.