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 Jan 17 '15 at 16:38 — Satpal, Jan 17 '15 at 16:38

tabz100 · Answer 1 · 2015-01-17T16:45:40.517

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 '15 at 16:45

answered Jan 17 '15 at 16:38

tabz100

1,463
11
14

but by using this both function is being called at the same time i want to all the second one after first is completed – Aman Singh Jan 17 '15 at 16:41
The jQuery animate method takes in a callback so you pass in the callback – tabz100 Jan 17 '15 at 16:44

guest271314 · Accepted Answer · 2015-01-17T16:56:11.063

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 '15 at 16:56

answered Jan 17 '15 at 16:45

guest271314

1
15
104
177

what should i do if i want to call series of functions similarly one after another ? thanks in advance – Aman Singh Jan 17 '15 at 17:05
@Aman See http://stackoverflow.com/questions/27206855/is-there-an-easier-way-of-chaining-different-jquery-actions-for-different-select/27216737#27216737 – guest271314 Jan 18 '15 at 06:07

Why the callback in javascript is not working?

2 Answers2