Pause switch statement until AJAX success
<p>I have a form inside a slider, and elements inside each section of the slider are controlled by their respective case in a switch statement. For example:</p>

<p>HTML</p>

<pre><code>&lt;ul class="slider"&gt;
    &lt;li class="slide"&gt;
        &lt;span class="next"&gt;Next&lt;/span&gt;
    &lt;/li&gt;
    &lt;li class="slide"&gt;
        &lt;span class="next"&gt;Next&lt;/span&gt;
    &lt;/li&gt;
    &lt;li class="slide"&gt;
        &lt;span class="next"&gt;Next&lt;/span&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>JS</p>

<pre><code>$(function(){
    $('.next','.slide').click(function (e) {
        e.preventDefault();

        var slideIndex = $(this).closest('.slide').index();

        switch (slideIndex) {
            case 0:
                someFunction();
                break;
            case 1:
                anotherFunction();
                break;
            case 2:
                $.ajax({
                    type: "POST",
                    url: "http://some.site.com/register.php",
                    data: 'some data',
                    success: function (response) {
                        if (response)
                            // Call slide();
                    }
                });
                break;
            default:
                return false;
                break;
        }
    slide();
});
</code></pre>

<p>The problem is, <code>slide()</code> is always called at the end of the click function. Is there a way to only call the function after that AJAX request has given a response?</p>

<p><strong>Edit</strong></p>

<p>I probably didn't make myself clear enough. I know I could just call <code>slide()</code> in the ajax response, but then I would also have to call it at the end of every switch case. The flow should look something like:</p>

<p>User clicks 'next'..</p>

<p>-> script checks which slide the user is on </p>

<p>-> do logic for that slide </p>

<p>-> <code>slide()</code></p>
