title: jQuery and setTimeout inside For loop
body: <p>I just encountered a very weird issue (I fixed it though) but I wanted to know why did it happen in the first place:</p>
  
  <pre><code>function stuffAppear() {
      var i;
      for (i = 0; i &lt; speech.length; i++) {
          apperance(i);
      }
  }
  function apperance(i) {
      var x = speech[i];
      setTimeout(function() {$(speech[i]).fadeIn(1000); console.log(i);}, 1000 + i * 1500);
      console.log(speech[i]);
  }
  </code></pre>
  
  <p>The console log shows "#yo0" then "#ma0b" (which is the required) but at the same time, they never faded in</p>
  
  <p>I played around with the code until I reached this:</p>
  
  <pre><code>function stuffAppear() {
      var i;
      for (i = 0; i &lt; speech.length; i++) {
          apperance(i);
      }
  }
  function apperance(i) {
      var x = speech[i];
      setTimeout(function() {$(x).fadeIn(1000); console.log(i);}, 1000 + i * 1500);
  }
  </code></pre>
  
  <p>And that did the trick, but I don't know why the first code didn't work. Can someone explain that to me, please?
  And thank you!</p>