title: Can setTimeout save my looping function from being deemed unresponsive?
body: <p>I have some Javascript code that is very process intensive and it is triggering the “unresponsive script” warning. Each of the coded steps have to occur in the order in which they are coded. I think I have located the offending function but I don’t understand how to make it work without triggering the warning.</p>
  
  <p>I found an indication of something that might help here (setTimeout)
  <a href="https://stackoverflow.com/questions/2686118/javascript-unresponsive-script-error">Javascript: Unresponsive script error</a>
  but this was really vague so I kept looking. Here is a much better example but I cant see a way to implement this in my code..
  <a href="https://stackoverflow.com/questions/210821/how-can-i-give-control-back-briefly-to-the-browser-during-intensive-javascript#210994">How can I give control back (briefly) to the browser during intensive JavaScript processing?</a>
  The original article
  <a href="http://www.julienlecomte.net/blog/2007/10/28/" rel="nofollow noreferrer">http://www.julienlecomte.net/blog/2007/10/28/</a>
  is by all accounts genius but I cant seem to figure it for implementation here.</p>
  
  <p>Here is the code I believe is causing the fit.</p>
  
  <pre><code>// -----------------------------------
  //  Output stats for all nations
  //  by continent in a colon delimited
  //  list further delimited by a ~
  //  ( ContinentName:NationPower:NationHTML )
  //  expects the output from the 
  //  continent_stats function
  // -----------------------------------
  
  function Nations(ContinentData) {
  
      document.write("&lt;tr&gt;&lt;th&gt;Nation Stats&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;"); // setup progress bar
      var NationString = ""; // init the string
      var Carray = ContinentData.split("*"); //continents
      for (cit = 0; cit &lt; Carray.length; cit++) { // go through the continents
          var Cstat = Carray[cit].split(":"); // make an array of the individual continent stats
          var NumberOfNations = Cstat[4]; // nation #
          var ContinentName1 = Cstat[0]; // Continent Name
          document.write("&lt;td class='ProgressBarText'&gt;" + ContinentName1 + "&lt;/td&gt;&lt;td class='ProgressBars'&gt;"); // Format loader screen text
          for (nnum = 0; nnum &lt; NumberOfNations; nnum++) { // go through the number of nations on the continent
              var nat1 = BuildCulture(); // build the nation
              var Natname= "Nation"+padLeft(nnum,2,"0"); // name the nation
              NationString = NationString + ContinentName1 + ":" + Natname + ":" + nat1 + "~"; // build the string
              document.write("█"); // add to progress bar
          }
          document.write("&lt;/td&gt;&lt;td&gt;"+NumberOfNations+ " Nations&lt;/td&gt;&lt;/tr&gt;"); // progress bar complete
      }
      document.write("&lt;/table&gt;"); // end the loader screen table
      // send the nation string back
      return NationString;
  }
  </code></pre>
  
  <p>So you can see that it cycles through continents and creates nations for each continent. The  BuildCulture() function is the culprit. By itself it works just fine but string 8 or 9 together over the course of around 4 continents and the warning goes off.</p>
  
  <p>I have tried using</p>
  
  <pre><code>setTimeout( function() { BuildCulture(); }, 1000);
  </code></pre>
  
  <p>all over the place, in the main code section, in the BuildCulture() function beginning and end, in the Nations(ContinentData) function in and out of the loops. It never works.</p>
  
  <p>I am clearly looping too much but I need every loop. Will SetTimeout help me at all or am I chasing the wrong statement?</p>
  
  <p>If SetTimeout is my target for a solution, how can I implement it in this code?</p>
  
  <p>Thanks much.</p>
  
  <p><em>P.S.
  I am only aiming for this to work in Firefox so compatibility with IE core browsers is not necessary.</em> </p>