设置要执行的功能的顺序

Question

I have two Jquery function. How do I set the execution order so that function B would only be called after function A, (reason behind is that Function A set a value to a variable IdstoExclude that is getting passed as a parameter to function B. Below is what i tried but no luck:

var IDstoExclude = "123";
callListService('getArticleTypelistById', 'Atid', 87, 5, '#MainStory', '#tmplFeaturePanel', IDstoExclude);
callListService('getArticleTypelistById', 'Atid', 87, 10, '#LeftSideContent1', '#tmplLeftSideContent1', IDstoExclude);


function callListService(webServiceName, parameterName, parameterValue, noOfItems, domElement, templName, exclIDs) {
    //set a default value for the template name * exclIDs
    templName = templName || "#FeaturedSubStories";
    //exclIDs = exclIDs || "123,12";
    var inputParameters = webServiceName.toLowerCase() + ':' + parameterName.toLowerCase() + ':' + parameterValue + ':noofitems:' + noOfItems + ':excludeids:' + exclIDs;
    var clientcode = getCryptoToken(inputParameters);
    //Build JSONp query
    eval("data={" + parameterName.toLowerCase() + ":" + parameterValue + ", noofitems: " + noOfItems + ", excludeids:" + exclIDs + ",  clientcode:'" + clientcode + "' }");

    $.getJSON('https://abc.com/Service.svc/' + webServiceName + '?callback=?', data, function (data2) {
        var template = $.templates(templName);
        var htmlOutput = template.render(data2);
        $(domElement).append(htmlOutput);
        IDstoExclude = data2.IdsInThisList;

    });

Tried below but no luck: var IDstoExclude = "123";

function callService1() {
    return $.ajax()
        .then(function(response) {
            callListService('getArticleTypelistById', 'Atid', 87, 10, '#LeftSideContent1', '#tmplLeftSideContent1', IDstoExclude);
        });
}

function callService2() {
    callListService('getArticleTypelistById', 'Atid', 87, 10, '#LeftSideContent1', '#tmplLeftSideContent1', IDstoExclude)
}

$.when(callService1()).then(callService2);

Answer 1

For this solution to work as you expect your code should look like something below:

function callService1(p1, p2, ...) {
    return $.ajax(...)
        .then(function(response) {
            return something;
        });
}

function callService2(something_from_s1) {
    // work with something_from_s1 var
}

$.when(callService1(...)).then(callService2);

References:

• http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/
• http://api.jquery.com/category/deferred-object/
• http://api.jquery.com/deferred.then/