Jquery callback function

Question

I have a problem in creating a callback function. First, as far as I can understand, a callback acts like a parametr which triggers when all the action in its "parent" function has finished. For example:

$('p').hide('slow', function() {
    $(this).show('slow');
});

At first <p> is hidden, and only afterwards it shows again.

How can I apply such callback in a random plugin?

For example a plugin looks like this:

 $.fn.myPlugin = function(settings) { 
   return this.each(function() {
    settings = $.extend({ onShow: null }, settings);
    $(this).hide('slow');  /*This action should happen first (First action)*/
    if ( $.isFunction( settings.onShow ) ) 
     settings.onShow.call(this);/*Callback should fire after First action has stopped*/
     }
   });
 };


$(document).ready(function() 
   $('p').myPlugin({
     onShow: function() {
     alert('My callback!');/*Both actions(element hiding and alert ) 
                             fire simultaneously, but I need alert 
                             to fire after element is hidden*/
      }
   });
});

I'm trying a callback to work the right way, like in most jquery methods. $(document).ready(function(){*Evereything in here happens after Dom is loaded but not before, so it is a callback*/}); And I would like to know how to write a callback in my plugin — tylik
– tylik, Commented Jun 29, 2010 at 16:12

Darin Dimitrov · Accepted Answer · 2010-06-29 12:48:43Z

4

You can't apply it in a random plugin. If the plugin is not written to trigger callback functions when different events occur you cannot use them.

answered Jun 29, 2010 at 12:48

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jAndy · Accepted Answer · 2010-06-29 12:58:07Z

1

A callback function is a function, which is passed to another function/method and gets called at some point.

If we create a function like

function mightyplugin(foo, callback){
   // big code block here

   callback.apply(this, [foo]);
}

we now have a function, which calls another function. In this example, it parses one parameter through it and calls our callback-function within the scope of this.

A call would look like

mightyplugin("Bar!", function(param){
    alert(param);
});

we pass an anonymous function (more precisly, a reference) to mightyplugin() and we can access our parameter in there, since we call that anonymous function with a scope and an array of parameters (which only holds the original parameter here).

Those constructs must already be implemented by a plugin, otherwise you need to create your own functionality.

answered Jun 29, 2010 at 12:58

jAndy

237k57 gold badges313 silver badges363 bronze badges

2 Comments

tylik Over a year ago

Thanks for your answer. But I need a callback to be triggered only after mightyPlugin has finished doing everything else assigned to it

tylik Over a year ago

// big code block here sholud happen first, and only after that a callback should fire

Deenathaiyalan Shanmugam · Accepted Answer · 2015-11-12 08:18:49Z

0

function loadAjax(paramUrl, paramData, paramType, paramAsync) {
    var result = ""
    $.ajax({
            url: paramUrl,
            data: paramData,
            type: paramType,
            async: paramAsync,
            success: function (res) {
                result = res
            },
            error: function (data) {
                alert("Unexpected error: " + data.val());
            }
        });
    return result;
}

answered Nov 12, 2015 at 8:18

Deenathaiyalan Shanmugam

601 silver badge6 bronze badges

Collectives™ on Stack Overflow

Jquery callback function

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related