How do I write a jquery function that accepts a callback as a parameter

Question

I Have the following function.

function ChangeDasPanel(controllerPath, postParams) {

    $.post(controllerPath, postParams, function(returnValue) {

        $('#DasSpace').hide("slide", { direction: "right" }, 1000, function() {

            $('#DasSpace').contents().remove();

            $('#DasSpace').append(returnValue).css("display", "block");

            $('#DasSpace').show("slide", { direction: "right" }, 1000);

        });

    });

};

But I want to be able to call it like this

ChangeDasPanel("../Home/Test", {} ,function (){
  //do some stuff on callback
}

How can I implement support for callbacks in my function?

Tomalak · Accepted Answer · 2011-08-24T08:27:33.480

function ChangeDasPanel(controllerPath, postParams, f) {
  $.get(
    controllerPath, 
    postParams, 
    function(returnValue) {
      var $DasSpace = $('#DasSpace');
      $DasSpace.hide(
        "slide", { direction: "right" }, 1000, 
        function() {
          $DasSpace.contents().remove();
          $DasSpace.append(returnValue).css("display", "block");
          $DasSpace.show("slide", { direction: "right" }, 1000);
        }
      );
      if (typeof f == "function") f(); else alert('meh');
    }
  );
};

You can pass functions like any other object in JavaScript. Passing in a callback function is straight-forward, you even do it yourself in the $.post() call.

You can decide whether you want to have your callback called as part of the $.post() callback or on its own.

exactly what I've been trying to do for the past 30 minutes. Thanks! helped me out — Sean Chambers, Feb 07 '10 at 14:12
Thanks for the “if (typeof f == "function") f();” part. I have been looking for that! — Garavani, May 31 '15 at 09:30

score 23 · Answer 2 · edited Mar 20 '14 at 05:27

23

You know that global variables and functions are evil, so why not put your's into the jQuery namespace:

$.extend({
  myFunc : function(someArg, callbackFnk){
    var url = "http://example.com?q=" + someArg;
    $.getJSON(url, function(data){

      // now we are calling our own callback function
      if(typeof callbackFnk == 'function'){
        callbackFnk.call(this, data);
      }

    });
  }
});

$.myFunc(args, function(){
  // now my function is not hardcoded
  // in the plugin itself
});

Read this post to get a better understanding: Creating callback functions in jQuery

edited Mar 20 '14 at 05:27

jdphenix

15,022
3
41
74

answered Feb 26 '10 at 20:15

Uzbekjon

11,655
3
37
54

Cool. How can i create anonymous function like in Jquery itself `$.hide(555, function()){})` ?? Or callbackFnk is the answer? – aleXela Sep 25 '13 at 20:09
Yeap, `callbackFnk` is just a local variable. As you can see in the example, we are passing an anonymous function: `$.myFunc(args, function(){})`. – Uzbekjon Sep 25 '13 at 20:57
Thanks once again! One more question, will it fire after the main func finish? – aleXela Sep 26 '13 at 11:48
1

Nope, it will fire within the main function (within the `myFunc` call). – Uzbekjon Sep 30 '13 at 07:04

score 14 · Answer 3 · answered Jun 23 '09 at 10:31

14

If I understand you correctly, it's as easy as setting another parameter and calling the variable as a function:

function foo(mycallback) {
    mycallback();
}

answered Jun 23 '09 at 10:31

Alan Plum

10,814
4
40
57

score 11 · Answer 4 · answered Jun 23 '09 at 10:42

Why don't you use an object that you can pass through to the function. It is much more jQuery like and it saves you having x named parameters which is hard to maintain as it can get unwieldy when you get past 3 params.

e.g

function callingFunction(){

      var fnSettings: {
        url: someUrl,
        data: params,
        callback : function(){}
      };


      yourFunction( fnSettings );

}

function yourFunction( settings ) {

      $.post( settings.url, settings.data, settings.callback );

}

This is definitely the cleanest answer (I wrote something similar, so I might be biased) — arviman, Jun 21 '12 at 23:27

How do I write a jquery function that accepts a callback as a parameter

4 Answers4

Linked