How to apply deferreds to execute function 3 times in a row??

Question

I am trying to executed the same function 3 times in a row, but get errors while doing that. Apparently the scripts runs faster than the execution. Code:

$("document").ready(function () {
    WebInherited();
    CreateGroup("Group1", "Description group 1");
    CreateGroup("Group2", "Description group 2");
    CreateGroup("Group3", "Description group 3");
});

function WebInherited() {
    var c = new SP.ClientContext();
    this.w = c.get_web();
    c.load(w, "HasUniqueRoleAssignments");
    c.executeQueryAsync(
        Function.createDelegate(this, this.fxLoad),
        Function.createDelegate(this, this.fxFail)
        );
}

function fxLoad() {
    console.log("hasUniqueRoleAssignments == " +   w.get_hasUniqueRoleAssignments());
    if (!w.get_hasUniqueRoleAssignments()) {
        console.log("Obtaining web's permission properties...");
        var ctx = new SP.ClientContext();
        web = ctx.get_web();
        ctx.load(web, "RoleAssignments", "RoleDefinitions");
        ctx.executeQueryAsync(
            Function.createDelegate(this, this.fxBreak(web)),
            Function.createDelegate(this, this.fxFail)
            );
    }
}

function fxBreak(web) {
    console.log("Breaking Inheritance...");
    web.breakRoleInheritance(false, true);

}

function fxFail() {
    console.log("faal");
}

function CreateGroup(sName, sDescr) {
    console.log("Loading site group data and checking if " + sName + " should be created...");
    groupName = sName;
    groupDescr = sDescr;
    var ctx = new SP.ClientContext();
    web = ctx.get_web();

    //group collection
    groups = web.get_siteGroups();

    //checken of group al bestaat
    ctx.load(groups);
    ctx.executeQueryAsync(
        Function.createDelegate(this, this.fxCheckIfExists),
        Function.createDelegate(this, this.fxFail)
    );    
}

function fxCheckIfExists() {
    console.log("groups query succeeded");
    var grpEnum = groups.getEnumerator();
    var cnt = 0;
    while (grpEnum.moveNext()) {
        var grpItem = grpEnum.get_current();
        console.log(grpItem.get_title());
        if (grpItem.get_title() == groupName) {
            cnt += 1;
            console.log("Group " + groupName + " already exists.")
            break;
        }
    }
    if (cnt == 0) {
        console.log("Group " + groupName + " does not exist")
        fxCreate(groupName, groupDescr);
    }
}

function fxCreate(groupName, groupDescr) {
    console.log("Creating group " + groupName + "...");
    var ctx = new SP.ClientContext();
    web = ctx.get_web();
    var groups = web.get_siteGroups();

    //info nieuwe group
    var infoGroup = new SP.GroupCreationInformation;
    infoGroup.set_title(groupName);
    infoGroup.set_description(groupDescr);

    //nwe group toevoegen aan group collection
    var oGroup = groups.add(infoGroup);

    //rol definieren, 1073741827=Contributor
    var rdContribute = web.get_roleDefinitions().getById(1073741827);

    //role collection ophalen en nwe rol toevoegen
    var collRoleDefBindings =   SP.RoleDefinitionBindingCollection.newObject(ctx);
    collRoleDefBindings.add(rdContribute);
    var assignments = web.get_roleAssignments();
    var raContribute = assignments.add(oGroup, collRoleDefBindings);

    //group creeren in ctx
    ctx.load(oGroup);
    ctx.executeQueryAsync(
        function () {
            console.log("group " + groupName + " gecreerd!")
        },
        function () {
            console.log("group " + groupName + " creeren mislukt...");
        });
}

Basically what I want is: 1) Check if Unique Persmissions, if not then breakInheritance 2) Create 3 new groups if they do not exist yet.

However, executing the CreateGroup-function three times like this doesn't work. How can I wait with execution of a funcion untill the previous function is totally finished??

All help will be highly appreciated!!!!

Answer 1

Use jQuery promises. Basic implementation:

var deferred = $.Deferred();

deferred.then(function() {
//do callback to check unique permissions
}).then(function(){
//create groups
});