Out of order execution - no Ajax involved
<p>I'm experiencing some out-of-order execution in javascript, and it's not related to any ajax calls or such. The main bulk of code is a possibly slow DOM manipulation, followed by a method call. In every single case, the function call is being fired before the DOM manipulation finishes.</p>

<p>Here is my code:</p>

<pre><code>$(this).parents('dd').siblings('dd').each(function(){
  var filter_name = $(this).attr('data-filter-type');
  if ($(this).hasClass('selected')) {
    $(this).removeClass('selected', function(){
      if ($(this).hasClass('date')) {
        $('form[name="filter-form"] input[name="from"]').remove();
        $('form[name="filter-form"] input[name="to"]').remove();
      } else {
        $('form[name="filter-form"] input[name="' + filter_name + '"]').remove();
      }
      console.log('removed');
    });
  }
});

var filter_type = $(this).parents('dd').attr('data-filter-type');
var filter_input = 'form[name="filter-form"] input[name="' + filter_type + '"]';
if ($(filter_input).length &gt; 0) {
  $(filter_input).val(filter_value);
} else {
  $('form[name="filter-form"]').append('&lt;input type="hidden" name="' + filter_type + '" value="true"&gt;');
}

doStuff($(this));
</code></pre>

<p>In my console, I am seeing the result of doStuff before I am seeing the debug.</p>

<p>Anybody have any ideas how to make the function call wait?</p>
