Proper syntax for callback on custom javascript function / jQuery

Question

I've simplified this down, and yes... I know that fadeIn is a strange example... but that is part of the point.

How do I make a call back function on a custom function - or a function with nothing passed through it... for example - what if there is no argument? Here is a fiddle to illustrate my confusion -

I have broken up this monster set of callbacks into little groups, and I want to chain them - but I'm definitely missing something...

jQuery

// An example function

function sheriff(speed) {
    $('.thing').fadeIn(speed);
}

$('button').on('click', function() {

    sheriff(1000, function() {
        $('body').css('background-color', 'red');
    });

});

EDIT

This is my actual code, with the proper callback in place. I over simplified with my first example, and it didn't show a complicated enough use - and so - for others I'll leave this here.

jQuery

function pullInSocialButtons(speed, callback) {

    var facebook    = $('.toy-box-top .social-links li:nth-of-type(1)');
    var twitter     = $('.toy-box-top .social-links li:nth-of-type(2)');
    var google      = $('.toy-box-top .social-links li:nth-of-type(3)');
    var email       = $('.toy-box-top .social-links li:nth-of-type(4)');

    facebook.fadeIn(speed, function() {
        twitter.fadeIn(speed, function() {
            google.fadeIn(speed, function() {
                email.fadeIn(speed, callback); // CALLBACK
            });
        });
    });

} // end

Then in this other function --->

$('.some-thing').fadeIn(500, function() {

    pullInSocialButtons(50, function() {
      setTimeout(function () {

        $('.porthole').fadeIn(500);

      }, 1000);
    });

});

If you want to chain them, have a look at the deferred object. — Simon Halsey
– Simon Halsey, Commented Mar 10, 2014 at 3:26
There isn't a problem. I just wanted to show how I used the answer, because you only put the callback at the end in the case of all these nested callbacks, and I wanted to leave some evidence of how the answer helped me in a more complicated situation. — sheriffderek
– sheriffderek, Commented Mar 10, 2014 at 4:25
@SimonHalsey thanks for that suggestion. Finding useful stuff in promise and deferred. — sheriffderek
– sheriffderek, Commented Mar 10, 2014 at 4:27

Arun P Johny · Accepted Answer · 2014-03-10 03:25:32Z

6

In your sheriff, you can receive the second param as the second parameter like

// An example function

function sheriff(speed, callback) {
    $('.thing').fadeIn(speed, callback);
}

$('button').on('click', function() {

    sheriff(1000, function() {
        $('body').css('background-color', 'red');
    });

});

Demo: Fiddle

answered Mar 10, 2014 at 3:25

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

sheriffderek Over a year ago

OHHHH ! I see, I see! Thank you, that was driving me nuts! I remember that now! Thank you.

sheriffderek Over a year ago

I added some more specific code since I oversimplified - and it didn't seem like it would be much help to anyone in the future. If you have a second, let me know if in the new scenario - I placed it well. Thanks.

Collectives™ on Stack Overflow

Proper syntax for callback on custom javascript function / jQuery

jQuery

EDIT

jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

jQuery

EDIT

jQuery

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related