CODEWITHSUNDEEP
javascriptjquerysequential
Alok Kumar
Alok Kumar

Reputation: 372

Maintaining the sequence of Function execution in javaScript using jQuery

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>

Upvotes: 1

Views: 1458

Answers (3)

mattsbox
mattsbox

Reputation: 91

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 ()
{

})()

Upvotes: 2

ChuckE
ChuckE

Reputation: 5688

Well, that'll be hard to fully achieve. As mattmanser already wrote, function declaration ensures all functions will be sequentially called. What is not clear by your question is whether there'll be any I/O callback inbetween. Let's say, in f2 you fetch a certain HTML page from your site using $.get. If you have any further code under that call, this will run in parallel with your fetch... unless you pack this code insde $.get success callback. So in theory, every function call in javascript will be sequentially called, but the callback mechanism will not ensure stuff will also not be executed in parallel.

Upvotes: 0

mattmanser
mattmanser

Reputation: 5796

You're confusing function declaration and function running. It doesn't matter the order you declare functions, just the order you call them. Declaring:

function a() {
    console.log("a");
}

function c() {
    console.log("c");
}

function b() {
    console.log("b");
}

function runAll() {
    a();
    b();
    c();
}

a(); //will print a
runAll(); //will print a b c on different lines

Javascript is also not asynchoronous unless you make it, calling a functions is blocking, the program execution will not continue until your function is finished. In the example above runAll will not run until a has finished running.

The only exceptions to this is if you call some asynch jQuery code, like jQuery.ajax.

Upvotes: 0

Related Questions