1

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>
Improve this question
4
  • when done - are you talking about asynchronous execution or just linear? Commented Jan 15, 2013 at 10:56
  • The order of execution will depend on whether in your function bodies you use async requests or setTimout. Execution of those will be released from the main thread so the order of their return will become unpredictable (depending on the time needed to complete their tasks). In such a case you need to implement a FIFO queue where you push in executables (functions) and then execute them in the order of their arrival to the queue. Otherwise, the order is predictible. Commented Jan 15, 2013 at 10:59
  • I dont know what it should be . But I want it to be like the 1st function must complete execution that is "done" then it should go ahead. At present some of function that must be completed earlier is taking time so the output changes. Commented Jan 15, 2013 at 11:01
  • Okay finally completed it successfully using done() and callback. Thanks to @mattsbox and all others for helping me out. Commented Jan 16, 2013 at 6:16

3 Answers 3

Reset to default
2

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

})()
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

yee there was a misprint in my question where I used function keyword with f4 inside f2 . while it should be just f4 as I meant to just call f4 . See the edited version now
Okay finally completed it successfully using done() and callback. Thanks @mattsbox
0

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.

Improve this answer

3 Comments

yes I am using jQuery.ajax which makes some function to run slow even though called earlier.
yee there was a misprint in my question where I used function keyword with f4 inside f2 . while it should be just f4 as I meant to just call f4 . See the edited version now
@Alok mattsbox's answer is what you need to do in that case.
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.