title: random timer in settimeout (in for loop) is not accurate
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>     for (var i = 0; i &lt;= 10; i++) { setTimeout(function(ind) { return function() { 
         let start = Date.now()
  
  
          $('.output').append(
            "&lt;div class=\"notify_box\"&gt;THIS IS THE BOX NUMBER"+ind+"&lt;/div&gt;"
           ).hide().fadeIn(1000);
  
          // fadeout / remove existing notify box  (3 seconds) and call another box 
          setTimeout(function(){ 
           $('.notify_box').fadeOut("slow")
          }, 2000);
  
         console.log(Date.now() - start)  
       }; }(i), Math.round(Math.random() * (5000 - 3000)) + 3000 *i);  } </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .notify_box {
     background:  #9782AF;
     color: #ffffff;
     padding: 8px;
     border-radius: 20px;
     width: 30%;
     position: fixed;
        margin: 0 10px 10px 0;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="output"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>here is my jsfiddle: <a href="https://jsfiddle.net/gsfe6vm9/" rel="nofollow noreferrer">https://jsfiddle.net/gsfe6vm9/</a></p>
  
  <p>in line 15, the timber seems not to be accurate. I set it to randomly loop for 3 to 5 seconds, but sometimes it pop-ups 1 or 2 seconds.</p>
  
  <p>How can I also console.log the time it pops-up? line 14 seems to be incorrect.</p>
  
  <p>Here's the code I used:</p>
  
  <pre><code>for (var i = 0; i &lt;= 10; i++) {
      setTimeout(function (ind) {
          return function () {
              let start = Date.now()
  
                  $('.output').append(
                      "&lt;div class=\"notify_box\"&gt;THIS IS THE BOX NUMBER" + ind + "&lt;/div&gt;").hide().fadeIn(1000);
  
              // fadeout / remove existing notify box  (3 seconds) and call another box
              setTimeout(function () {
                  $('.notify_box').fadeOut("slow")
              }, 2000);
  
              console.log(Date.now() - start)
          };
      }(i), Math.round(Math.random() * (5000 - 3000)) + 3000 * i);
  }
  </code></pre>