title: JavaScript loop to call a different function every 30 seconds
body: <p>I'm (poorly) attempting to create a simple page which loops between a clock + date, current weather, 7-day weather forecast, news and calendar events. Each of these 'items' are called upon using functions.</p>
  
  <p>For example; I've created functions like:</p>
  
  <pre><code>displayTime();      // Time + date using Moment.js
  currentWeather();   // Current weather using Forecast.io        (AJAX call)
  forecastWeather();  // Weekly forecast of the weather           (AJAX call)
  latestNews();       // Latest headlines from RSS source/s       (AJAX call)
  calendarEvents();   // Calendar events from iCloud calendars
  </code></pre>
  
  <p>They all work perfectly when I call them on their own; but on jQuery document ready I want to call the clock + date function, wait 30 seconds, and then call the next function (which would be current weather). After all functions have been through the loop, I'd like the loop to go back to the clock and start all over again.</p>
  
  <p>How would I be able to do this?</p>
  
  <p><strong>Re-edit:</strong> After the suggestion from Chop, I'd like to use something along the lines of the following - while the clock updates every second as planned, the functions don't switch over every 30 seconds.</p>
  
  <pre><code>jQuery(document).ready(function ($) {      
      function displayOne(){
          displayTime();
          setTimeout(displayTwo, 30000);
      }
      function displayTwo() {
          currentWeather();
          setTimeout(displayOne, 30000);
      }
      displayOne();
      setInterval(displayTime, 1000);
  });
  </code></pre>