CODEWITHSUNDEEP
javascriptjquery
Lorraine Bernard
Lorraine Bernard

Reputation: 13430

execute something after callback has been executed

I am trying to execute a function after a callback has been executed.

here is my example

var callback1 = function () {
  // check input ($(this).val()) for validity here
};
var callback2 = function () {
 // make other things after callback1 has finished
};

$("input[type='text']").change(callback1);

Then when the callback1 has been executed I would like to execute the callback2.
What is the proper way to do this by using jquery/javascript

Upvotes: 1

Views: 844

Answers (8)

Ja͢ck
Ja͢ck

Reputation: 173662

You can assign multiple callbacks like so:

$('input ...')
    .on('change', callback1)
    .on('change', callback2)

There's one difference with how the other answers are written (i.e. use anonymous function that runs both callbacks iteratively). Consider this code:

function callback1(evt) {
    // check input ($(this).val()) for validity here

    // stop any other handlers from running
    evt.stopPropagation();
}

function callback2() {
    // make other things after callback1 has finished
}

You can prevent the execution of callback2 from inside callback1 by calling evt.stopPropagation() (I think returning false would accomplish the same thing). This is something to keep in mind.

Upvotes: 2

Marcus
Marcus

Reputation: 6849

Use a function that returns a function to do.

var callback1 = function (my_callback) {
  return function(){
    // check input ($(this).val()) for validity here
    //   ...
    my_callback();
  }
};
var callback2 = function () {
 // make other things after callback1 has finished
};

$("input[type='text']").change(callback1(callback2));

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

Use this:

var callback1 = function () {
  // check input ($(this).val()) for validity here
};
var callback2 = function () {
 // make other things after callback1 has finished
};
$('input[type="text"]').change(function() {
    callback1();
    callback2();
});

Upvotes: 0

Alberto De Caro
Alberto De Caro

Reputation: 5213

  1. Create a unique callback executing both the cb1 and cb2 code.

  2. Call the cb2 from inside the cb1.

Upvotes: 0

xdazz
xdazz

Reputation: 160943

Just do like below:

$("input[type='text']").change(function() {
    callback1();
    callback2();
});

Upvotes: 2

halex
halex

Reputation: 16403

Call the two callback functions in another anonymous function:

$("input[type='text']").change(function() {
    callback1;
    callback2;
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337714

Execute callback2 at the end of callback1:

var callback1 = function () {
    // check input ($(this).val()) for validity here
    callback2();
};
var callback2 = function () {
    // make other things after callback1 has finished
};

$("input[type='text']").change(callback1);

Or if you'd like to keep them completely independent, you can pass a function to the change() event which calls the callbacks individually:

var callback1 = function () { /* code */ };
var callback2 = function () { /* code */ };
$("input[type='text']").change(function() {
    callback1();
    callback2();
});

Upvotes: 1

Sirko
Sirko

Reputation: 74086

You can use an anonymous function and include both callbacks in there.

$("input[type='text']").change(function(){ 
  callback1();
  callback2();
});

Upvotes: 2

Related Questions