[JS] Pause binnen een loop - Softwareontwikkeling

dinsdag 18 oktober 2005 23:05

Acties:

Verwijderd

Topicstarter

Ik wil een soort automatische slideshow creeeren. Ik heb daarvoor een aantal afbeeldingen gemaakt, die over elkaar gelayered moeten worden. Al die afbeeldingen zijn opgeslaan in de vorm "naam_nummer.png".

Nu wil ik met een javascript al die bestanden doorlopen, maar dan moeten de vorige layers wel gewoon op het scherm blijven. Dit heb ik opgelost met een simpele z-index.

Uiteindelijk heb ik dit opgelost met een loop, zie mijn code.

code:

var j = 1;
for (var i = 8; i > 0; i--) { 
  document.write("<div style=\"position:absolute; top:100px; left:50%; z-index:"+ i +";\">[img]\"name_"+[/img]</div>");
  j++;
}

Alleen verschijnen alle afbeeldingen dan in 1 keer op het scherm. Ik wil graag een soort pause functie inbouwen, voordat de iteratie van de loop telkens begint. Daardoor krijg je een soort automatische dia te zien, en niet alles in 1 keer.

Nu heb ik gekeken naar deze site. Het lukt me niet om setTimeout binnen de for loop werkend te krijgen. Nu dacht ik dat ik een goede pause functie had gevonden, maar deze functie zorgt ervoor dat ik een script warning krijg, en dat werkt dus ook niet.

code:

    /*
    * This function will not return until (at least)
    * the specified number of milliseconds have passed.
    * It does a busy-wait loop.
    */
    function pause(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    }

Ik snap het niet meer. Kan iemand mij helpen met het inbouwen van een pauze binnen mijn loop? Bedankt!

[ Voor 4% gewijzigd door Verwijderd op 18-10-2005 23:09 ]

dinsdag 18 oktober 2005 23:07

Acties:

Verwijderd

Kun je het niet beter met een timer doen? Zoek maar eens op javascript timer. Als de timer gefired wordt, laat dan het volgende plaatje zien.

woensdag 19 oktober 2005 02:33

Acties:

Verwijderd

Topicstarter

Al die timers werken met een setTimeOut, en het werkt niet wanneer ik z'on timer aanroep binnen mijn loop.

Ik zet dan de timer functie in de head van het html bestand. Deze loop staat trouwens gewoon als javascript in de body van mijn html bestand. Het idee lijkt zo simpel...

woensdag 19 oktober 2005 02:48

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Ten eerste: Die "pauze" functie is ONTZETTEND ranzig. Je belast gewoon je CPU 100% met nutteloze zooi.
Ten tweede: Je moet van je loop afstappen. Maak een global "counter" variabele, hoog die telkens als een timer fired (setTimeout ja) op en als de waarde > max dan zet je 'm weer op 0 (of 1 of whatever) en begint je slideshow opnieuw....
Momentje...

HTML:

<html>
    <head>
        <title>SlideShow</title>
        <script>
            var iSlide = 0;
            var iMaxSlides = 10;
            var iSlideTimeOut = 5000; //5 sec.
    
            function showSlide() {
                //hier je code om de "dia" weer te geven...
                iSlide++;
                if (iSlide>iMaxSlides) iSlide = 0;
                window.setTimeout('showSlide()',iSlideTimeOut);
            }
        </script>
    </head>
    
    <body onload="showSlide();">
        <!-- Je HTML hier -->
    </body>
</html>

Effe uit de losse pols...

[ Voor 55% gewijzigd door RobIII op 19-10-2005 02:53 ]

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

woensdag 19 oktober 2005 03:37

Acties:

Verwijderd

Topicstarter

Het laadt nu alleen maar het eerste plaatje op, daarna blijft ie alleen maar laden.

code:

<html>
    <head>
        <title>SlideShow</title>
        <script language="JavaScript">
            var iSlide = 0;
            var iMaxSlides = 8;
    
            function showSlide(iSlideTimeOut) {
                //hier je code om de "dia" weer te geven...
                iSlide++;
                document.write("[img]\"image_"+[/img]"); 
                if (iSlide>iMaxSlides) iSlide = 1;
                   window.setTimeout("showSlide()", iSlideTimeOut);
            }
        </script>
    </head>
    
    <body>
    <script>
      showSlide(2000);
    </script>
    </body>
</html>

Mijn plaatjes zijn genummerd vanaf 1 en gaan tot en met 8. (8 plaatjes dus)

woensdag 19 oktober 2005 08:59

Acties:

Verwijderd

Je moet inderdaad gebruik maken van de setTimeout() functie.

Bovendien kan je er ervoor kiezen om niet iedere keer een nieuwe div toe te voegen, maar het img attribuut een id geven. En van dat id iedere keer de source te wijzigen. Of je div een id geven en van die div iedere keer de innerHTML aanpassen.

woensdag 19 oktober 2005 09:03

Acties:

Verwijderd

Ik heb het idee dat deze code niet helemaal goed is... Volgens mij zet hij nu alle plaatjes onder elkaar? Bekijk de source eens na een tijdje...

woensdag 19 oktober 2005 09:08

Acties:

Verwijderd

Topicstarter

Bedankt voor jullie feedback. Qua form en effciency met die div's, dat is wat voor latere zorg. Ik wil graag de plaatjes onder elkaar plaatsen, dus het eerste plaatje blijft bovenaan. De code die hier boven staat is een soort recursieve functie, door die setTimeout die de functie steeds aan zou moeten roepen. Alleen dit werkt niet. Het laadt alleen het eerste plaatje, dan blijft ie maar laden zonder iets te laten zien na die timeout.

woensdag 19 oktober 2005 09:59

Acties:

Verwijderd

Zo ziet mijn timer eruit:

JavaScript:

<script>
function StopTheClock()
{
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false
}
function StartTheTimer()
{
    if (secs==0)
    {
        StopTheClock()
        // laat volgende plaatje zien
    }
    else
    {
        secs = secs - 1
        timerRunning = true
        timerID = self.setTimeout("StartTheTimer()", delay)
    }
}
</script>

Je start hem door StopTheClock() en StartTheClock() aan te roepen.

Misschien moet je bij jouw code window.setTimeout eens veranderen in self.setTimeout...

woensdag 19 oktober 2005 17:14

Acties:

Verwijderd

Topicstarter

Ik heb ze allebei geprobeerd, maar het werkt steeds niet. Ik heb jouw functies binnen de head van mijn html gezet als script, en ik roep die functie dan aan binnen mijn loop. Het laadt dan alleen het eerste plaatje, en daarna stopt ie gewoon.

Via Google heb ik een applicatie gevonden die min of meer al doet wat ik wilde, zie deze site (edit: oops). Het enige wat hieraan nog mist is het toevoegen mijn z-index. Nu ben ik niet goed ingevoerd in Javascript, dus ik zie niet waar en hoe ik de z-index kan toevoegen binnen die code.

Thx!

woensdag 19 oktober 2005 17:19

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

In plaats van dat we je hier bij je handje gaan houden zou je natuurlijk ook wat onderzoek kunnen doen en je eens proberen te verdiepen in de materie. Wat jij wil is echt geen rocket-science.

Als je nou al eens aangaf wat je hebt geprobeerd, wat er (precies) niet werkt daaraan enzovoorts, dan zijn we al veel sneller geneigd je te helpen dan dat we zelf naar "deze link" mogen surfen, daar ons best doen om te kijken wat er in die (enorme lap!) source gebeurt en het dan dusdanig voor jou moeten aanpassen om het maar werkend te krijgen. We zijn geen persoonlijke helpdesk helaas

Ik wil wel nog een andere poging voor je wagen:

HTML:

<html>
    <head>
        <title>SlideShow</title>
        <script>
            var iSlide = 0;
            var iMaxSlides = 10;
            var iSlideTimeOut = 5000; //5 sec.
    
            function showSlide() {
                var oImg = document.getElementById('imSlideShow');
                oImg.src = 'myimage' + iSlide + '.jpg';
                iSlide++;
                if (iSlide>iMaxSlides) iSlide = 0;
                window.setTimeout('showSlide()',iSlideTimeOut);
            }
        </script>
    </head>
    
    <body onload="showSlide();">
        [img]"myimage0.jpg"[/img]
    </body>
</html>

Wederom, even uit de losse pols, maar dit zou moeten werken volgens mij...
Getest en het werkt... Niks geen gedoe met Z-index etc.

[ Voor 64% gewijzigd door RobIII op 19-10-2005 17:24 ]

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

woensdag 19 oktober 2005 19:27

Acties:

Verwijderd

Topicstarter

Rob111, heel erg bedankt voor je hulp. Ik heb programmeerervaring, maar heb nog heel weinig gewerkt met javascript, vandaar dat ik niet goed wist hoe alles werkte. Ik gebruik dit sciptje als een soort ondersteuning van mijn onderzoek (als je naar de naam van mijn plaatjes kijkt, kun je al raden waarover het gaat

). Ik ben absoluut niet lui of ik verwacht geen persoonlijke helpdesk. Maar goed, ik wil je laten zien wat ik in elkaar heb gezet, aangezien ik niet ondankbaar wil overkomen, en dus wat wil teruggeven. Ik heb je code wat verfraaid op mijn manier. Ik snap nog steeds niet hoe die z-index werkt, maar ik heb het maar opgelost door gewoon gebruik te maken van mijn vorige loop, gecombineerd met een extra forward/backward functie, waardoor de illusie wordt gewerkt dat je de lagen kunt zien/controleren. Niet de ideale oplossing...maar ja. Anyhow, dankjewel.

code:

<html>
    <head>
        <title>SlideShow</title>
        <script>
            var timeID;
            var imageName = "continentalUS";
            var firstImage = 1;
            var lastImage = 8;
            var imageType = "png";
            var imageHeight = "300";
            var imageWidth = "400";
            var iSlideTimeOut = 1000; //5 sec.
            
            function playSlide() {
                var oImg = document.getElementById('imSlideShow');
                oImg.src = imageName + "_" + firstImage + "." + imageType;
                firstImage++;
                if (firstImage > lastImage) firstImage = 1;
                  timeID = window.setTimeout('playSlide()',iSlideTimeOut);
            }
            function nextSlide() {
                firstImage++;
                if (firstImage > lastImage) {
                  firstImage = lastImage;
                }
                var oImg = document.getElementById('imSlideShow');
                oImg.src = imageName + "_" + firstImage + "." + imageType;
            }
            function previousSlide() {
                firstImage--;
                if (firstImage < 1) {
                  firstImage = 1;
                }
                var oImg = document.getElementById('imSlideShow');
                oImg.src = imageName + "_" + firstImage + "." + imageType;
            }
            function stopSlide() {
              window.clearTimeout(timeID);
            }
        </script>
    </head>
    
    <body>
      <FORM>
        <INPUT TYPE="button" VALUE="previous" onClick="previousSlide();">
        <INPUT TYPE="button" VALUE="play" onClick="playSlide();">
        <INPUT TYPE="button" VALUE="stop" onClick="stopSlide();">
        <INPUT TYPE="button" VALUE="next" onClick="nextSlide();">
      </FORM>
      <script>
        document.write("<div style=\"position:absolute; top:5%; left:20%; z-index:0;\">[img]\"US_base.png\"[/img]</div>");
        document.write("<div style=\"position:absolute; top:5%; left:20%; z-index:9;\">[img]\"blank.png\"[/img]</div>");
        
        var j = 1;
        for (var i = 8; i > 0; i--) { 
          document.write("<div style=\"position:absolute; top:5%; left:20%; z-index:"+ i +";\">[img]\"continentalUS_"+[/img]</div>");
          j++;
        }
      </script>
    </body>
</html>