SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot bloo_fish's Avatar
    Join Date
    Aug 2003
    Location
    Bucks [Uk]
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Running a function every x seconds

    Hi,


    I am trying to create a kind of rotating list of quotes. For this i have a function that builds and inserts the quotes but how do i make this run say every 30 seconds to refresh the quote?


    I have tried using window.onload = setInterval('rollingQuotes()',10000); but this doesn't seem to work in IE7 (Works in FF2)

    Full code

    Code:
    function rollingQuotes() {
       
       // Array of quotes
       var aQuotes = new Array();
       aQuotes[0] = 'test1';
       aQuotes[1] = 'test2';
       aQuotes[2] = 'test3';
       
       // Grab a random quote
       var iRand = Math.floor(Math.random()*aQuotes.length);
    
       // Get div and insert random quote
       var eQdiv = document.getElementById('buQuote');
       eQdiv.innerHTML = aQuotes[iRand];
       
       var anim = new YAHOO.util.Anim(eQdiv, {opacity: {from: 0, to: 1}}, 3);
       anim.animate();
       
    }
    
    window.onload = rollingQuotes();
    window.onload = setInterval('rollingQuotes()',10000);
    So thats the main function (works fine) and then i load the first instance so it does it straight away and then theoretically it should then do it every 10 seconds~

    Any help would be much appreciated.


    Thanks

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this:
    Code:
    window.onload = function () {
      rollingQuotes();
      setInterval(rollingQuotes,10000);
    }

  3. #3
    SitePoint Zealot bloo_fish's Avatar
    Join Date
    Aug 2003
    Location
    Bucks [Uk]
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    try this:
    Code:
    window.onload = function () {
      rollingQuotes();
      setInterval(rollingQuotes,10000);
    }
    Hi Jim,


    Thanks for that, but it doesn't seem to do anything at all for me.

    Assuming it should run anything in there i put an alert and it didn't run that either.

    Code:
    window.onload = function () {
      alert('hi');
      rollingQuotes();
      setInterval(rollingQuotes,10000);
    }
    There are no JS errors so i am not quite sure why its not working...


    Thanks for your help.

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you overwriting it? For example:
    Code:
    window.onload = myFunc;
    window.onload = somethingElse; // myFunc will no longer be called onload

  5. #5
    SitePoint Zealot bloo_fish's Avatar
    Join Date
    Aug 2003
    Location
    Bucks [Uk]
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    Are you overwriting it? For example:
    Code:
    window.onload = myFunc;
    window.onload = somethingElse; // myFunc will no longer be called onload

    Thats exactly what i was doing!


    Thanks a lot for your help, working perfectly now.

  6. #6
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So the last window.onload statement is acted on, rather than the first? (Just curious. The proper way is to use window.onload = function() { } for multiple actions to be done onload).
    Ian Anderson
    www.siteguru.co.uk

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes the last one - treat window.onload as a variable until the page completes loading, then it gets called, super simple analogy:
    Code:
    var a = 1;
    a = 2;
    a = 3;
    
    // finished loading
    alert(a); // alert 3

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For multiple onload events use:

    Code:
    window.onload = function () {
        myfunction1();
        myfunction2();
        myfunction3();
    }
    Actually, even better you can write an alternative function that will add a new function to the onload event, Drupal.js uses:

    Code:
    /**
     * Adds a function to the window onload event
     */
    function addLoadEvent(func) {
      var oldOnload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      }
      else {
        window.onload = function() {
          oldOnload();
          func();
        }
      }
    }
    So then you use:

    Code:
    window.onload = addLoadEvent(myFunction);
    and

    Code:
    if (isJsEnabled()) {
      addLoadEvent(function() {
        myFunction(arg1,arg2,arg3);
      });
    }
    when you want to pass parameters to your function.

    Dave

  9. #9
    SitePoint Zealot alexisb's Avatar
    Join Date
    Aug 2003
    Location
    Lima, Peru
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dave, exactly, I was about to mention addLoadEvent().

    Just wanted to add that there are more details about this way of loading functions at Simon Willison's blog. It's a technique every Javascript coder should know and that many libraries include in some form.


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
  •