Continue Execution Only After .each() Completes
<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>
