title: Javascript jquery fade-in/fadeout loop, how to use timer?
body: <p>New to javascript and such, trying to create a loop for fading logos using jquery.</p>
  
  <p>I've got it cycling through them just fine. But i tried to make the loop continuous; so that when it reached the last logo it went back to the beginning, by resetting my for-counter to 0 every time it reached the last logo. This resulted in an infinite loop i think that crashed my browser. So i did a quick google and discovered the window.setInterval(...)  timer function. </p>
  
  <p><strong>My problem is, now that firing the looping code relies on timing, i can't figure out how to calculate the interval time.</strong> For reference here's the code that fades the logos in and out (before trying to loop it):</p>
  
  <pre><code>$(document).ready(function (){
  
      var fadeDuration = 1000;
      var timeBetweenFade = 2000;
      var totalTimePerChange = fadeDuration + timeBetweenFade;
      var totalLogos = $('.logo').length;
      var currentLogo;
      var i;
  
          for(i = 0; i &lt; totalLogos; i++)
          {
              currentLogo = "#img" + i;
              if(i == 0){
                  $(currentLogo).fadeIn(fadeDuration).delay(timeBetweenFade).fadeOut(fadeDuration);
                  }
              else{ //general case
                  $(currentLogo).delay(totalTimePerChange * i).fadeIn(fadeDuration).delay(timeBetweenFade).fadeOut(fadeDuration);
              }
          }
  });
  </code></pre>
  
  <p>I tried to get the time a complete loop took in a couple of ways:</p>
  
  <pre><code>$(document).ready(function (){
  
      //..declarations..
  
      window.setInterval( function() {
          //..FOR LOOP HERE..
      }, i*(fadeDuration + timeBetweenFade + fadeDuration));
  });
  
  //I also tried..
  
  $(document).ready(function (){
  
      //..declarations..
      var timeTakenToLoop;
      var startLoopTime;
  
      window.setInterval( function() {
      startLoopTime = new Date().getTime();
          //...FOR LOOP HERE..
      timeTakenToLoop = new Date().getTime() - startLoopTime;
      }, timeTakenToLoop);
  });
  </code></pre>
  
  <p><strong>But in both cases I get logos starting to overlap as the function calls timing is wrong. Could someone with a bit more experience suggest what the best approach would be?</strong></p>
  
  <p>Oh and just in case anyone needs it to understand the javascript, here's the html to match..</p>
  
  <pre><code>    &lt;div id="img0" class="logo"&gt;
      &lt;img src="{% static "CSS/Images/phone_icon.gif" %}"/&gt;
      &lt;/div&gt;
      &lt;div id="img1" class="logo"&gt;
      &lt;img src="{% static "CSS/Images/email_icon.gif" %}"/&gt;
      &lt;/div&gt;
      &lt;div id="img2" class="logo"&gt;I can fade too&lt;/div&gt;
  </code></pre>