title: Lock a JavaScript Function
body: <p>I have a JavaScript function like the following.</p>
  
  <pre><code>function changeTheDom(var1, var2, var3) {
      // Use DWR to get some server information
      // In the DWR callback, add a element to DOM
  }
  </code></pre>
  
  <p>This function is called in a couple of places in the page. Sometimes, in a loop. It's important that the elements be added to the DOM in the order that the <code>changeTheDom</code> function is called. </p>
  
  <p>I originally tried adding <code>DWREngine.setAsync(false);</code> to the beginning of my function and <code>DWREngine.setAsync(true);</code> to the end of my function. While this worked, it was causing utter craziness on the rest of the page. </p>
  
  <p>So I am wondering if there is a way to lock the <code>changeTheDom</code> function. I found <a href="https://stackoverflow.com/questions/5346694/how-to-implement-a-lock-in-javascript">this post</a> but I couldn't really follow the <code>else</code> loop or how the <code>lockingFunction</code> was intended to be called.</p>
  
  <p>Any help understanding that post or just making a locking procedure would be appreciated.</p>