Question

I have a code having following structure. Basically my requirement is that onChange of option in “SELECT” f5 should run followed by f1.
And inside f1 – first f2 must run and when done then f3 must run. Completion of f2 means it also must ensure that f4 is run and completed.
I mean to have the flow maintained because if some function to be finished earlier is left behind then my whole program becomes waste.
I guess deferred has the solution hence I tried using it with pipe. But as I am not well versed in maintaining this flow I am not able to get my expected results.
Please help if you can.

<script>
function f1(){
   function f2(){
      ....
      f4();
      ....
   }
   function f3(){
      ....
   }
}

function f4(){}
function f5(){}
</script>
 ....
<select onChange=f5().pipe(f1) >
......
</select>

Answer 1

Edit: It seems you’re using $.ajax in the functions. If you want something to run after an AJAX query is complete, you can set it as a callback to be run when the query returns. For example, you can define f2 in terms of other functions, as such:

function f2()
{
    g();
    f4();
    h();
}

If f4 uses AJAX, you could change the definition as follows:

function f2()
{
    g();
    f4();
}
function f4()
{
    $.ajax("http://url.com").done(function(){
            h();
            f3();
        });
}

The done() function allows you to set one function (in this case it’s an anonymous one) to execute as soon as the query is successfully returned. With f2 defined this way, you don’t need f1 any more, so you can define another function

function f6()
{
    f5();
    f2();
}

Then you can change the onChange event to

<select onChange="f6()"></select>

Also note that, as mattmanser posted, this code: function f(){} only defines a function, it doesn’t run it. If you’d like the function to be executed immediately after it is defined, you can use a closure instead.

(function f ()
{

})()