How can I create a function, that will call another function, and when it pletes, fire another callback function?

so existing functions are:

function f1(..) {..}

function myCallback() {...}

Now is it possible to make f1 fire and finish, THEN run myCallback()?

How can I create a function, that will call another function, and when it pletes, fire another callback function?

so existing functions are:

function f1(..) {..}

function myCallback() {...}

Now is it possible to make f1 fire and finish, THEN run myCallback()?

• javascript
• jquery

Share Improve this question Follow asked Sep 30, 2010 at 16:51 BlankmanBlankman 267k332332 gold badges795795 silver badges1.2k1.2k bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 15

Provide a function reference as a parameter to the function you're calling.

function f1(fn) {

  // ...

  if (typeof fn === 'function') {    
    fn();
  }
}

// can be a defined function name or a variable holding a reference to a function
f1(myCallback);

f1();
myCallback();

… unless f1 is asynchronous, in which case f1 would have to be edited to accept a callback and run it when it is finished. Since there are multiple things that could make a function asynchronous, it isn't possible to give a simple "…and this is how" answer without a lot more detail.

function f1(param1, callback){
    // Do Work
    callback();
}

function myCallback(){
    // Do Callback Work
}

And then call f1 like:

f1(parameterValue, myCallback);

if f1 is just a simple javascript-function it runs synchonous, so you just have to call myCallback after it/at the end of f1. if if does some crazy ajax-stuff (with jquery in your case), there you can set a callback on these ajax-things.

You could create a facility to let you bind "onfinish" functions to any function:

function bindFollowup(f, followup) {
  return function() {
    f.apply(this, arguments);
    followup && followup();
  };
}

Then you can just define f1 and then write:

f1 = bindFollowup(f1, myCallback);

function f1(myCallBack)
{
// f1 activities 


myCallBack();
}

lincolnk provided a great answer. It can be made much more flexible using the arguments array:

function f1() {
  var i;
  // ...
  for (i = 0; i < arguments.length; ++i)
  {
      if (typeof arguments[i] === 'function') 
      {
          arguments[i]();
      }      
  }

}

Like this, you can pass in as many callback functions as you want. They will be executed in the order passed in. No harm is done if the argument is not a callback.

---

Finally, you can preserve the context and arguments of f1 using apply().

Preserving the context could definitely be useful in many situations. I'm not sure about the arguments, but it is an option.

function f1() {
  var i;
  // ...
  for (i = 0; i < arguments.length; ++i)
  {
      if (typeof arguments[i] === 'function') 
      {
            // You can leave off 'arguments', but preserving 'this' will 
            //   often be useful.
          arguments[i].apply(this, arguments);
      }      
  }

}

the above allows you to do things like:

f1("alert me",function() {alert(arguments[0]);});
// Output when the call back is called: 
//    "alert me" 

jsFiddle example

​