title: Change Style of Single Element Multiple Times in Same Function (only latest style shown at exit of function)
body: <p>I've got a setup of multiple images stacked on top of each other (image1 = normal icon, image2 = highlighted icon). </p>
  
  <p>My objective is to highlight the icon, do processing, then set the icon back to normal. Also, to process as fast as possible.  The bottleneck is the workarounds to get the "highlight" to show up.</p>
  
  <p>To accomplish this, I'm just switching the 
  .style.visibility = {"hidden", "visible"}</p>
  
  <p>The behavior that I'm seeing is that only the latest style is shown, and it doesn't update until the function exits.  From my research on SO, I've found the following:</p>
  
  <ul>
  <li>Toggle the .style.visibility or .style.display off and on to force a redraw
  <ul>
  <li>Didn't see the correct behavior. Only the latest update shown</li>
  </ul></li>
  <li>Use setTimeout(<em>callback</em>, 0) or setInterval(<em>callback</em>, 0)
  <ul>
  <li>Behaves as expected.  However, due to the browser enforced "minimum wait time", the code is not executing as fast as I need it to.  </li>
  <li>The setInterval() function implementation requires that the <strong>function is called twice to perform one operation</strong> (once to highlight, second time to process then unhighlight)</li>
  <li>I can upload code if necessary</li>
  </ul></li>
  </ul>
  
  <p>I've attached a quick sample code to demonstrate that only the last style is shown</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
  &lt;title&gt;test redraw&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;img id="logo"
          src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
  AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
      9TXL0Y4OHwAAAABJRU5ErkJggg=="
          alt="Red dot from wikipedia" /&gt;&lt;/img&gt;
  
  
      &lt;script&gt;
          function pausecomp(ms) {
              ms += new Date().getTime();
              while (new Date() &lt; ms) {
              }
          }
          function hide_then_show() {
              var id = document.getElementById("logo");
              pausecomp(1000);
              id.style.display = "none";
              id.parentNode.style.display = "none";
              id.parentNode.style.display = "block";
              pausecomp(1000);
              id.style.display = "block";
              id.parentNode.style.display = "none";
              id.parentNode.style.display = "block";
          }
  
          window.addEventListener("click", hide_then_show());
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any suggestions would be appreciated.  I don't know if I'm approaching this the best way</p>