Sequence several functions on jQuery

Question

I have a function that stores several values from a HTML form, and that must work individually in order to store that info in any situation I need (ie before inserting on DB, or before udating info on DB...)

I need to be able to tell the system to execute this function ( 'storeValues' ),and then execute any other (could be 'createNewClass' , 'updateExistingClass' ... whatever).

How can I sequence this? I tried here to store values first and, WHEN DONE, execute another function aleting about a value, but it says "storeValues() is not defined", and it is defined:

$('.tableClassHeader').on('click', '.createClass', function(){
    storeValues().promise().done(function(){
        createNewClass();
    });
});

function storeValues(){
    cl_year = $('.newClassForm').find('select[name=cl_year]').val();
    cl_course = $('.newClassForm').find('select[name=cl_course]').val();
    }

function createNewClass(){
    alert(cl_year);}

I mean that storeValues function SHOULD BE a separate function with the possibility of being called from any other place, I know this problem could be solved by executing "createNewClass" from the "storeValues" function, but there will be times that I need to execute "updateClass" after "storeValues", not "createNewClass"

Answer 1

You can use a callback like this, if your storeValues is not synchronous like in your example:

$('.tableClassHeader').on('click', '.createClass', function(){
    storeValues(createNewClass);
});

function storeValues(callback){
    cl_year = $('.newClassForm').find('select[name=cl_year]').val();
    cl_course = $('.newClassForm').find('select[name=cl_course]').val();
    callback();
}

function createNewClass(){
    alert(cl_year);
}

If it is synchronous, just calling createNewClass after storeValues is enough.

What this does is:

• offers you the ability to pass a function of choice to the storeValues
• inside storeValues it calls the callback function passed as parameter

If you need to execute your function with a different scope you can use call or apply .

---

Another way to do this, without callbacks would be using

http://api.jquery.com/promise/
http://api.jquery.com/jQuery.when/
http://api.jquery.com/deferred.promise/

Example as seen here http://jsfiddle.net/47fXF/1/ :

$('.tableClassHeader').on('click', '.createClass', function(){
    $.when(storeValues()).then(createNewClass);
});

function storeValues(){
    var dfd = new jQuery.Deferred();
    setTimeout(function(){
        console.log('storing values');
        cl_year = $('.newClassForm').find('select[name=cl_year]').val();
        cl_course = $('.newClassForm').find('select[name=cl_course]').val();
        dfd.resolve();
    }, 1000);

    return dfd.promise();
}

function createNewClass(){
    alert("trololo");
}

Added the setTimeout to simulate asynchronicity.

If your storeValues is making only one ajax request using jQuery, then you can return it directly as shown in the API documentation.

Also make sure to call resolve() , reject() appropriately.

Answer 2

Call like this . it first call the storeValues after executes the createNewClass function

$('.tableClassHeader').on('click', '.createClass', function(){

    storeValues(function() {
        createNewClass();
    });

});

function storeValues(callback){
    cl_year = $('.newClassForm').find('select[name=cl_year]').val();
    cl_course = $('.newClassForm').find('select[name=cl_course]').val();
    callback();
}