Loop function calling async function

Question

Someone mentioned that calling cascaded async functions don't work. However I'm trying a simple test with a for-next loop and getting unpredictable results. The console.log always shows the last item but all the items get created. Is there something wrong with the way I'm reporting the ID?

<script type="text/javascript">

function btnSubmit_OnClientClick() {

for (i = 0; i < 3; i++) { 
    create(i);
        }
console.log('completed main code');
}


function create(i) {

    var clientContext = new SP.ClientContext.get_current();

    var oList = clientContext.get_web().get_lists().getByTitle('TestPromises');

    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);

    oListItem.set_item('Title', 'Item '+ i );

    oListItem.update();
    clientContext.load(oListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.SaveEmployeeSuccess), Function.createDelegate(this, this.SaveEmployeeFailure));

}


function SaveEmployeeSuccess() {
console.log('item created'+oListItem.get_id());
}

function SaveEmployeeFailure() {

}

</script>

Answer 1

Cascading async functions do work, since your example is working fine. It's only how your are handling responses that's problematic.

It looks like the problem is how you are referencing oListItem.

Each time you iterate though the loop you are changing the same reference to oListItem since in your case this.oListItem is a global variable. try using var oListItem instead and then passing the reference to the item into your success method in some manner.

Edit, here's a working example:

function create(i) {

    var clientContext = new SP.ClientContext.get_current();

    var oList = clientContext.get_web().get_lists().getByTitle('SomeList');

    var itemCreateInfo = new SP.ListItemCreationInformation();

    //note that we are using var to make a local variable.
    var oListItem = oList.addItem(itemCreateInfo);

    oListItem.set_item('Title', 'Item '+ i );
    oListItem.update();
    clientContext.load(oListItem);

    var SaveEmployeeSuccess = function() {
        console.log('item created'+this.get_id());
    }

    var SaveEmployeeFailure = function() {};
    clientContext.executeQueryAsync(
        Function.createDelegate(oListItem, SaveEmployeeSuccess), 
        Function.createDelegate(oListItem, SaveEmployeeFailure));

}