title: How To Sequentially Display div's With Different Time Intervals For Each
body: <p>Good Afternoon All </p>
  
  <p>We've been able to get a basic version of this working with a single time interval in javascript</p>
  
  <pre><code>    time = 10000; // 10 Seconds
      var counter = 0;
      divs = $('#div1, #div2, #div3, #div4, #div5');
      function showDiv () {
      divs.hide() // hide all divs
          .filter(function (index) { return index == counter % 5; }) 
      // figure out correct div to show
          .fadeIn(300, "linear"); // and show it
          counter++;
          if (counter &gt; 5 ){
              counter = 1; //Reset Counter
          }
     }; // function to loop through divs and show correct div
     showDiv(); // show first div  
  
     setInterval(function(){ showDiv(); }, time); // do this every 10 seconds 
     });
  </code></pre>
  
  <p>What I'd like to do is cause the intervals to be different on each of the div times</p>
  
  <p>Like div1 &amp; div2 play for 10 seconds and the others play for 5 seconds</p>
  
  <p>I was able to get the logic working to see if the time had changed based upon which div was displaying but could not get "time" to update from one value to another</p>
  
  <p>I've been reading that using setInterval() does not allow for changing of a variable value once it's been loaded.
  There were some suggestions to use setTimeout() but I could not figure it out</p>
  
  <p>Anyone with a suggestion?</p>
  
  <p>Thanks~</p>