title: Synchronizing style changes during javascript function progress
body: <p>I am trying to indicate function progression while a long-running function causes the page to appear unresponsive. My first attempt was to simply begin and end my function with stylesheet commands like so:</p>
  
  <pre><code>function myFunc() {
    document.body.style.cursor = "progress";
    // main guts //
    document.body.style.cursor = "default";
  }
  </code></pre>
  
  <p>This resulted in the "progress" cursor seemingly not having a chance to manifest before the time-consuming "guts" take over, ending with the cursor back at default. This appears to me to be an issue of timing or synchronization because</p>
  
  <pre><code>function myFunc() {
    document.body.style.cursor = "progress";
    if(document.body.style.cursor == "progress") {
      // main guts //
    }
    document.body.style.cursor = "default";
  }
  </code></pre>
  
  <p>performs just like my first attempt, from which I infer that javascript recognizes the stylesheet change, but does not have time to show it before diving into the "guts." Separating the stylesheet changes from the "guts" and using setTimeout, like so:</p>
  
  <pre><code>function myFunc() {
    document.body.style.cursor = "progress";
    setTimeout(guts, 100);  // tried up to 5000ms
    document.body.style.cursor = "default";
  }
  function guts() {
    // main guts //
  }
  </code></pre>
  
  <p>performs no differently the previous attempts with the exception of the added time delay, as if the setTimeout was equally interrupting of manifesting the stylesheet changes.</p>
  
  <p>Using an alert() after the change to "progress" remedies the problem, but is not appropriate for the intended usage. The cursor manifests its new style properly upon the alert and before diving into the "guts" with the following:</p>
  
  <pre><code>function myFunc() {
    document.body.style.cursor = "progress";
    alert("!"); // main guts //
    document.body.style.cursor = "default";
  }
  </code></pre>
  
  <p>but I cannot be prompting the users in such a manner for such a reason. Another attempt was to use callback functions to sequence instructions, like so:</p>
  
  <pre><code>//// source
  myFunc(guts);
  
  //// target
  function myFunc(cbFunc) {
    document.body.style.cursor = "progress";
    cbFunc();
    document.body.style.cursor = "default";
  }
  function guts() {
    // main guts //
  }
  </code></pre>
  
  <p>but this results in the same performance as the non-alert cases. I have also tried using background colors instead of cursor styles (in case this issue was particular to cursors) to no avail.</p>
  
  <p>Can someone identify my misunderstanding(s) with this kind of flow-control in javascript?</p>
  
  <p>-UPDATES-</p>
  
  <p>Also to no avail:</p>
  
  <pre><code>function myFunc() {
    document.body.style.cursor = "progress";
    document.body.style.cursor = guts();
  }
  function guts() {
    // main guts //
    return "default";
  }
  </code></pre>
  
  <p>Thank you dandavis for the following solution:</p>
  
  <pre><code>function myFunc() {
    document.body.style.cursor = "progress";
    setTimeout(guts, 50);  // needs at least 10ms in my observations
  }
  function guts() {
    // main guts //
    document.body.style.cursor = "default";
  }
  </code></pre>