在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();
}