Why the callback in javascript is not working?

Question

I want to call the second function after first is completed

function first(callback) {
     alert('called first');
     $('.fillColor1').animate({
         height: '50px'
     }, 600);
 }

function second() {
    alert('called second');
    $('.fillColor2').animate({
        height: '50px'
    }, 600);
}

$('button').click(function() {
    first(second);    
});

Here is the code what i want on jsfiddle

I got this problem then i searched for this and landed to this link

Execute jquery function after another function completes

Please let me know, is any mistake am i doing

Thanks in advance

You are not using callback in your first function.

Satpal
– Satpal

2015-01-17 16:38:33 +00:00
Commented Jan 17, 2015 at 16:38 — Satpal
– Satpal, Commented Jan 17, 2015 at 16:38

tabz100 · Accepted Answer · 2015-01-17 16:45:40Z

4

You need to actually call the callback after the first function:

function first(callback) {
     alert('called first');
     $('.fillColor1').animate({
         height: '50px'
     }, 600, callback);
}

function second() {
    alert('called second');
   //Do Code
}

$('button').click(function() {
    first(second);    
});

edited Jan 17, 2015 at 16:45

answered Jan 17, 2015 at 16:38

tabz100

1,47311 silver badges14 bronze badges

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

2 Comments

Aman Singh Over a year ago

but by using this both function is being called at the same time i want to all the second one after first is completed

tabz100 Over a year ago

The jQuery animate method takes in a callback so you pass in the callback

guest271314 · Accepted Answer · 2015-01-17 16:56:11Z

2

Edit, Updated

function first(callback) {
     alert('called first');
     $('.fillColor1').animate({
         height: '50px'
     }, 600, callback);
}

function second() {
    alert('called second');
    $('.fillColor2').animate({
         height: '50px'
     }, 600);
}

$('button').click(function() {
    first(second);    
});

jsfiddle http://jsfiddle.net/zqgfz54b/1/

Alternatively

function fx(elem, callback) {
     alert('called ' + elem[0]);
     $('.fillColor' + elem[0])
     .animate({
         height: '50px'
     }, 600, function() {
       elem.splice(0, 1);
       callback.call($, elem)
     });
};

$('button').click(function() {
    fx.call($, [1, 2], fx);    
});

jsfiddle http://jsfiddle.net/zqgfz54b/2/

edited Jan 17, 2015 at 16:56

answered Jan 17, 2015 at 16:45

guest271314

1

2 Comments

Aman Singh Over a year ago

what should i do if i want to call series of functions similarly one after another ? thanks in advance

guest271314 Over a year ago

@Aman See stackoverflow.com/questions/27206855/…

Collectives™ on Stack Overflow

Why the callback in javascript is not working?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related