Passing parameters to callbacks JavaScript

Question

I would like for a callback function to fire after a click event. Currently I have the JavaScript

 $('#btnSubmit').click(function ()
            {
                $('#testDiv').hide('slow', onComplete('test'));
            });


            var onComplete = function (t)
            {
                $('#hiddenDiv').hide();
                alert(t);
            }

The callback function is supposed to be fired after the hiding of #testDiv. However, the onComplete function fires first. If I remove the parameters on onComplete and just give it a reference and not invoke it, then the function fires at the right time, but I can't pass parameters to it. How can I pass parameters to onComplete and not have it fire before the div is finished hiding?

fiddle here

try $('#testDiv').hide('slow', onComplete);, passing callback function reference rather than executing it. — shakib
– shakib, Commented Oct 6, 2013 at 18:38

Sergio · Accepted Answer · 2013-10-06 18:45:20Z

2

You have to actually have a anonymous function there wrapping your onComplete():

$('#btnSubmit').click(function () {
    $('#testDiv').hide('slow', function () {
        onComplete('test')
    });
});

Demo here

In the jQUery docs:

complete
Type: Function()
A function to call once the animation is complete.

When adding onComplete() without a wrapping function the function will be called immediately, otherwise you need to reference it just with onComplete, but then you cannot pass your value unless you use .bind() to pass your parameter.

edited Oct 6, 2013 at 18:45

answered Oct 6, 2013 at 18:36

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

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

2 Comments

wootscootinboogie Over a year ago

Can you explain why you have to have that anonymous function to call onComplete and you can't just call onComplete directly?

JJJ Over a year ago

@wootscootinboogie Because you can't pass a function reference with attached parameters.

Artyom Neustroev · Accepted Answer · 2013-10-06 18:35:18Z

1

Use anonymous function:

$('#btnSubmit').click(function () {
   $('#testDiv').hide('slow', function () { 
      onComplete('test') 
   });
});

answered Oct 6, 2013 at 18:35

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

Comments

Karl-André Gagnon · Accepted Answer · 2013-10-06 18:41:53Z

1

You can use .bind() :

$('#testDiv').hide('slow', onComplete.bind(null, 'test'));

The first parameter is the value this will have in the onComplete function. All other parameters are the argument list.

answered Oct 6, 2013 at 18:41

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

2 Comments

wootscootinboogie Over a year ago

Why is the first parameter in bind null and not undefined?

Karl-André Gagnon Over a year ago

@wootscootinboogie It doesn't matter what the first parameter is if you dont use this in the function onComplete.

Collectives™ on Stack Overflow

Passing parameters to callbacks JavaScript

3 Answers 3

Demo here

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Demo here

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related