title: How can I get this code to make the sequence obvious?
body: <p>The code below allows me to have an array with a set of numbers such as "thearray=[2,8,9]" and loop through that array, and for each number item in the array for example "2,8,9", the code calls a function an amount of times equal to the current number item in the array. So if the current number item is 2, the function gets called twice. </p>
  
  <p>After the set of calls, there is a pause, and then the function is called again an amount of times equal to the current number in the array etc. In other words, as the array is being looped through, if the current number item is 2, the function named "thefunction" will be called twice then there is a pause and the function "thefunction" is then again called an amount of times equal to the next number in the array. </p>
  
  <p>In my case, "thefunction" simply displays an alert box message two times followed by a pause, then 8 times followed by a pause, then 9 times followed by a pause etc. Of course, with the alert box messages, I get the messages in sequence because I must select ok before I see the next alert message. The problem is, I can't get the calls to "thefunction" to appear sequential like when the code to be executed within "thefunction" displays an alert box, when other code such as appending an li item with data to a ul is within that function. </p>
  
  <p>It's as if the 2 calls are made at once, then the 8 calls are made at once, etc. Even though that may not be the case, it happens so fast, it seems like it. I would like to slow it down. So if the code within "thefunction" was code that would append information to an li element, instead of just seeing the information rapidly added where the sequence of calls isn't noticeable, I would like there to be a delay so that when li elements are appended, the sequence is more obvious rather than rapid where it's hard to see the sequence.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>function runArray(arr, fn) {
  // initialize array index - can't use for loop here with async
  var index = 0;
  
  function next() {
     var cnt = +arr[index];
     for (var i = 0; i &lt; cnt; i++) {
         fn(index, cnt);
     }
     // increment array index and see if there's more to do
     ++index;
     if (index &lt; arr.length) {
         setTimeout(next, 400);
     }
  }
  // start the whole process if the array isn't empty
  if (arr.length) {
     next();
  }
   }
  
  runArray(thearray, shakeit);
  </code></pre>
  
  <p>and here is a jsfiddle demonstrating a log rapidly adding information. I want to slow it down so the information is added slow enough to make it obvious there is a sequence.</p>
  
  <p><a href="http://jsfiddle.net/jfriend00/Loycmb3b/" rel="nofollow">http://jsfiddle.net/jfriend00/Loycmb3b/</a></p>