title: Set interval in a nested loop
body: <p>I have a nested loop in a function which takes a while to load on IE8 and results in an unresponsive page.  </p>
  
  <p>I have a loading bar which 'freezes' when the script is running.  </p>
  
  <p>How can I use <code>setInterval()</code> to stop processing JS after each iteration to make it appear the loading bar is still moving and make it appear that the page is responsive?</p>
  
  <p>The function is:</p>
  
  <pre><code>function createDropDown() {
      var target = $('#mainList');
      for (var i = 0; i &lt; info.books.length; i++) {
        var gnrval = info.books[i].genre
        var catval = info.books[i].category
        for (var j = 0; j &lt; info.books[i].publishers.length; j++) {
          var pubval = info.books[i].publishers[j].publisher
          if (typeof app.cache.pub[pubval] == 'undefined') {
            app.cache.pub[pubval] = {
              'ul': $('&lt;li class="publisher" data-value="' + pubval + '"&gt;&lt;a href="#" class="sdeep"&gt;' + pubval + '&lt;/a&gt;&lt;ul class="sub-menu" data-title="Publishers"&gt;&lt;/ul&gt;&lt;/li&gt;').appendTo(target).children('ul'),
              'aut': {}
            };
  
          }
          var ulauthors = app.cache.pub[pubval].ul;
  
          for (var k = 0; k &lt; info.books[i].publishers[j].authors.length; k++) {
            var autval = info.books[i].publishers[j].authors[k].name + ' (' + gnrval + ')'
            var aut_val = info.books[i].publishers[j].authors[k].name
            if (typeof app.cache.pub[pubval].aut[autval] == 'undefined') {
              app.cache.pub[pubval].aut[autval] = $('&lt;li class="author" data-value="' + autval + '"&gt;&lt;a href="#" class="sdeep"&gt;' + autval + '&lt;/a&gt;&lt;ul class="sub-menu" data-title="Authors"&gt;&lt;/ul&gt;&lt;/li&gt;').appendTo(ulauthors).children('ul')
            }
            var ulyears = app.cache.pub[pubval].aut[autval]
            console.log(ulyears)
  
            var gItems = []
            for (var m = 0; m &lt; info.books[i].publishers[j].authors[k].yearsPublished.length; m++) {
              var yearval = info.books[i].publishers[j].authors[k].yearsPublished[m]
              var year = ulyears.find('.year[data-value="' + yearval + '"]')
              if (year.size() == 0) {
                var id = ++count
                gItems.push('&lt;li class="year" data-value="' + yearval + '"&gt;&lt;a id="selyear' + id + '" class="addone" data-id="' + id + '" data-year="' + yearval + '" data-pub="' + pubval + '" data-aut="' + aut_val + '" data-cat="' + catval + '" data-gnr="' + gnrval + '"&gt;' + yearval + '&lt;/a&gt;&lt;/li&gt;')
              }
            }
            ulyears.append(gItems.join(''))
          };
        };
      };
  </code></pre>
  
  <p>I tried adding:</p>
  
  <pre><code>setTimeout(function () {
  //last nested loop code here
          timeout();
      }, 1000);
  </code></pre>
  
  <p>But obviously it didn't work.</p>