在jQuery上排序几个函数

Question

我有一个函数，该函数存储HTML表单中的多个值，并且必须单独工作才能在所需的任何情况下（例如，在插入DB之前，或在DB上查询信息之前）存储该信息。

我需要能够告诉系统执行此功能（ 'storeValues' ），然后执行其他任何功能（可以是'createNewClass' ， 'updateExistingClass' ……等等）。

我该如何排序？ 我在这里尝试先存储值，然后在完成后执行另一个有关值的函数，但是它说“ storeValues（）未定义”，并且已定义：

$('.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);}

我的意思是storeValues函数应该是一个单独的函数，可以从任何其他地方调用，我知道可以通过从“ storeValues”函数执行“ createNewClass”来解决此问题，但是有时我需要执行“ storeValues”之后的“ updateClass”，而不是“ createNewClass”

Answer 1

如果您的storeValues不是像示例中那样同步， 则可以使用这样的回调：

$('.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);
}

如果是同步的，则在storeValues之后调用createNewClass就足够了。

这是什么：

• 使您能够将选择的函数传递给storeValues
• 在storeValues内部，它调用作为参数传递的回调函数

如果您需要在其他范围内执行函数，则可以使用call或apply 。

---

没有回调的另一种方法是使用

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

如此处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");
}

添加了setTimeout以模拟异步性。

如果您的storeValues仅使用jQuery发出一个ajax请求，则可以直接返回该请求，如API文档中所示。

还要确保适当地调用resolve() ， reject() 。

Answer 2

这样打电话。 在执行createNewClass函数后，它首先调用storeValues

$('.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();
}