title: How to increase a counter variable after a callback of a setTimeout-function?
body: <p>For demonstration purposes I want to create a multiple file upload progress bar animation. I created following fiddle so far: <a href="http://jsfiddle.net/c2C6U/1/" rel="nofollow">http://jsfiddle.net/c2C6U/1/</a> </p>
  
  <p>The problem is that I want to fire the next animation when the animation before has ended but I don't know how. I've read something about jQuery's queue method but it seems just to work with a delay and not with a callback. But later on when there will be real uploads there will be callbacks for finished uploads. I want to fire the callback when the percentage is 100%, then reset the percententage to 0 and start the timeout function of i+1.</p>
  
  <p>The count of the files will vary because there is a dropzone. But it's easy to count them: <code>var uploads = $('.progress').size();</code></p>
  
  <p>Every try to start the queued animation loop ended in parallel animations or endless loops. So it would be great if someone could give me some tips, links, code snippets or whatever :)</p>
  
  <p><strong>The Code:</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="file"&gt;
      &lt;div class="name"&gt;file1.png&lt;/div&gt;
      &lt;div class="progress"&gt;&lt;progress max="100" value="0"&gt;&lt;/progress&gt;&lt;/div&gt;
      &lt;div class="percentage"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="file"&gt;
      &lt;div class="name"&gt;file2.png&lt;/div&gt;
      &lt;div class="progress"&gt;&lt;progress max="100" value="0"&gt;&lt;/progress&gt;&lt;/div&gt;
      &lt;div class="percentage"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="file"&gt;&lt;div class="name"&gt;file3.png&lt;/div&gt;
      &lt;div class="progress"&gt;&lt;progress max="100" value="0"&gt;&lt;/progress&gt;&lt;/div&gt;
      &lt;div class="percentage"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="upload_submit"&gt;Upload now&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#upload_submit{
      width: 120px;
      height: 25px;
      line-height: 25px;
      background-color:#dedede;  
      color:#646464;
      text-align: center;
      float: right;
      cursor: pointer;
  }
  
  
  .file .name{
      width: 260px;
      float: left;
  }
  
  .progress{
      width: 200px;
      float: left;    
  }
  
  .percentage {
      width: 50px;
      margin-left: 10px;
      float: left;
  }
  
  .file .progress progress{
      width: 200px;
      background-color: #888;
      border: none;
  
  }
  
  .file:not(:first-child) .progress progress{    
      background-image: url('https://raw.githubusercontent.com/kopipejst/progressbar/master/skins/jquery-ui-like/pbar-ani.gif');
  }
  
  .progress progress::-moz-progress-bar { background: #dedede; }
  </code></pre>
  
  <p>Javascript/jQuery:</p>
  
  <pre><code>var perc = 0;
  
  $('#upload_submit').click(function () {
       $('.percentage').eq(0).append("0%");
       timeout();
  });
  
  function timeout() {
       setTimeout(function () {
           if (perc &lt;= 95) {
               perc = perc + 5;
               $('progress').eq(0).val(perc);
               $('.percentage').eq(0).html(perc + "%");
           }
           timeout();
       }, 1000);
  }
  </code></pre>