SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: setInterval

  1. #1
    SitePoint Member Turnip's Avatar
    Join Date
    May 2004
    Location
    Reading, Berkshire, UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    setInterval

    Hi,

    What I'm working on at the moment is an object-orientated JavaScript that will rotate quotes in a DIV (or anything else, but it's a DIV at the moment). I have tried to code it so that any number of instances of the object can run on the same page. Currently it isn't working properly though. It works fine with one instance on the page, but when I put two on the page, it start doing all sorts of funny things.

    I'll start by pasting the code:

    ----------
    TurnipQuoter.js
    ----------
    Code:
    function TurnipQuoter(quotes)
    {
        this.register();
        this.quotes=new Array();
        for (var i=0;i<quotes.length;i++)
            this.quotes[i]=quotes[i]
        this.currentQuote=0
    }
    var TurnipQuoter_array;
    if (typeof(TurnipQuoter_array)=="undefined")
        TurnipQuoter_array=new Array();
    var TurnipQuoterInterval_array;
    if (typeof(TurnipQuoterInterval_array)=="undefined")
        TurnipQuoterInterval_array=new Array();
    TurnipQuoter.initiate=function()
    {
        for(var i=0;i<TurnipQuoter_array.length;i++)
            TurnipQuoter_array[i].startInterval();
    }
    TurnipQuoter.prototype.startInterval=function()
    {
        TurnipQuoterInterval_array[this.index]=setInterval("TurnipQuoter_array["+this.index+"].nextQuote()",1000);
    }
    TurnipQuoter.prototype.register=function()
    {
        this.index=TurnipQuoter_array.length;
        TurnipQuoter_array[this.index]=this;
    }
    TurnipQuoter.prototype.getId=function()
    {
        return "TurnipQuoter_"+this.index;
    }
    TurnipQuoter.prototype.html=function()
    {
        var html="";
        html+="<div id=\""+this.getId()+"\" style=\"border: 3px solid blue;\">";
        html+="\""+this.quotes[0]+"\"";
        html+="</div>";
        return html;
    }
    TurnipQuoter.prototype.nextQuote=function()
    {
        if (this.currentQuote+1<this.quotes.length)
        {
            document.getElementById(this.getId()).innerHTML="\""+this.quotes[this.currentQuote+1]+"\"";
            this.currentQuote=this.currentQuote+1;
        }
        else
        {
            document.getElementById(this.getId()).innerHTML="\""+this.quotes[0]+"\"";
            this.currentQuote=0;
        }
    }
    ----------
    TurnipQuoter_Sample.html
    ----------
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script type="text/javascript" src="TurnipQuoter.js"></script>
    <title>TurnipQuoter Sample</title>
    </head>
    <body onload="TurnipQuoter.initiate();">
    Body HTML<br />
    <script type="text/javascript">
    var tq=["This is quote number 0 - Turnip","This is quote number 1 - Turnip","This is quote number 2 - Turnip","This is quote number 3 - Turnip"];
    tq=new TurnipQuoter(tq);
    document.write(tq.html());
    var tq2=["This is quote number 0 - Turnip2","This is quote number 1 - Turnip2","This is quote number 2 - Turnip2","This is quote number 3 - Turnip2"];
    tq2=new TurnipQuoter(tq2);
    document.write(tq2.html());
    </script>
    More Body HTML<br />
    </body>
    </html>
    ----------

    Basically, with just a single instance of TurnipQuoter, it will display a blue DIV and the quotes will cycle round and round, changing every second. With two instances though, the timing goes all wrong (so the quotes change at different times), and they dont go in order (so you get it going from 1 to 3 to 0 to 1 to 2 etc...). I don't know why this is, but I'm guessing that it has to do with the setInterval.

    The setInterval starts like so:
    When the body has loaded, it executes the TurnipQuoter.initiate() static method. This loops through each instance of TurnipQuoter (by making use of the "TurnipQuoter_array" array) and then executes the startInterval() method (it references to this by using the "TurnipQuoter_array" array as well. The startInterval() method then does a setInterval for the instance, again making use of the "TurnipQuoter_array" array ("this.nextQuote()" doesn't work in a setInterval). The intervals are all assigned to the "TurnipQuoterInterval_array" array, in order to keep them from conflicting with each other.

    Maybe I did something wrong, but I can't think what it is.

    Thanks for any help.
    Turnip

  2. #2
    SitePoint Member Turnip's Avatar
    Join Date
    May 2004
    Location
    Reading, Berkshire, UK
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ignore this, it's sorted.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •