title: Continue Execution Only After .each() Completes
body: <p>I am looking for a way to call a function only after <code>.each()</code> finishes its execution. In the example below, how to make sure that <code>postPreparation()</code> runs <em>immediately after</em> <code>$('.element').each()</code> completes?</p>
  
  <pre><code>$('.element').each(function() {
    /** 
     * 'prepareLayer()' is a complex function that takes a while to complete and,
     *  as in this construct, needs to be invoked for each matched element. Basically,
     * 'prepareLayer()' adds a lot of new HTML elements to the page.
     */   
    prepareLayer();
  });
  
  /**
   * Ideally, this should immediately run _after_ the above function completes
   * i.e. after each '.element' finishes running prepareLayer().
   *
   * 'postPreparation()' needs to attach some event handlers for the new HTML elements
   * created in 'prepareLayer()'.
   */
  postPreparation();
  </code></pre>
  
  <p>Technically, I am looking for a way to invoke a callback function for <code>.each()</code>.</p>
  
  <p><strong>NOTE</strong>: I just confirmed, in the example above, that <code>postPreparation()</code> will execute only after <code>.each()</code> completes. The problem was my <code>prepareLayer()</code> builds the new HTML elements using AJAX, so <code>each()</code> returns prematurly. As suggested by @Alnitak, an asynchronous AJAX request wouldn't stop <code>.each()</code> from returning prematurely.</p>