javascript curtain (used to idicate busy process) not displaying for entire process. Probaly I dont understand the callback wll enough.

Question

I have a process where a user puts in a comma delimited list that is then processed one item at a time. I want to be able to indicate to the user that it is processing and let them know when it is done. So I used the curtain idea from Borgar's replay to ... Div Over Page. This worked but the curtain disappears well before the process is done. I believe it is because each call in the forEach loop inside the importIDs function is called asynchronously thus returning control back before it completes. (I know that is the idea behind asynchronous code.) So what do I need to do to keep the curtain up until it is done?

HTML that calls the function

<label>Import list:</label><input style="width: 30em;" type="text" id="jcDelimitedList"/><input onclick="importIDs('jcDelimitedList','selectedJobCodes','AddJobCode');" type="button" value="Do It"/>

import function

    importIDs = function(dList,nodeId,actionName){
    busyProcess(function(){
        var ids = dojo.byId(dList).value;
        dojo.forEach(ids.split(","),function(entry,i){doAssosiate(nodeId,actionName,null,dojo.byId(entry));});
    });

};

which calls the busy function

    busyProcess = function(callback){
    var ret;
    var curtain = document.body.appendChild(document.createElement('div'));
    curtain.id = "curtain";
    curtain.onkeypress = curtain.onclick = function(){return false;};
    try{
        ret = callback();
    }finally{
        curtain.parentNode.removeChild(curtain);
    }
    return ret;
};

which in turn processes the passed in loop that calls doAssosiate for each element in the array:

    doAssosiate = function(nodeID,actionName,evt,aNode){
    if(aNode==null)return;
    var node = dojo.byId(nodeID);
    var newNode;
    var target = evt!=null?evt.target:aNode;
    newNode = dojo.clone(target);
    var tID = target.id;
    var sUrl = "action/groups." + actionName + "?id=" + tID  + "&groupID=" + groupID + bustCache("&");
    var get = getDefered(sUrl);
    get.addCallback(function(data){
        node.appendChild(newNode);
        target.parentNode.removeChild(target);  
        return data;
    });
    get.addCallback(function(data){
        dojo.behavior.apply();
        return data;
    });
};

which runs each url with getDefered

getDefered = function(url){
console.log(url);
return dojo.xhrGet({
    url:url
});

};

I think I have all the relevant code above. I thought using sending the loop through the busy process would hold until finished and then return instead it holds until it fires off each iteration and then returns before they are complete.

As always thanks for any input and criticism.

Answer 1

A couple of interesting bugs in the above. Mainly if the list of ids in the array is to large it troughs more traffic at the database then it can handle. So I went to a recursive function instead of the foreach loop. Then removed the responsibility of turning off the curtain from busyProcess function and added it to the recursive call that turned the curtain off on exit of the recursion. For anyone that cares below are the changed functions. Also change to use dojox.widget.Standby for the curtain.

    busyProcess = function(callback){
    var ret;
    document.body.appendChild(standby.domNode);
    standby.show();
    ret = callback();

    return ret;
};

instead of calling doAssosiate now it calls assosiateAll;

    importIDs = function(dList,nodeId,actionName){
    busyProcess(function(){
        var ids = dojo.byId(dList).value;
        var sourceNode = dojo.byId(nodeId);
        assosiateAll(ids.split(","),0,sourceNode,actionName);
    });
};




    assosiateAll = function(idArray,idx,sourceNode,actionName){
    if(idx <= idArray.length ){
        var target = dojo.byId(idArray[idx]);
        if(target == null){
            idx++;
            assosiateAll(idArray,idx,sourceNode,actionName);
        }else{
            var newNode = dojo.clone(target);
            var tID = target.id;
            var sUrl = "action/groups." + actionName + "?id=" + tID + "&groupID=" + groupID + bustCache("&");

            var get = getDefered(sUrl);
            get.addCallback(function(data){
                sourceNode.appendChild(newNode);
                target.parentNode.removeChild(target);
                return data;                    
            });
            get.addCallback(function(data){
                idx++;
                assosiateAll(idArray,idx,sourceNode,actionName);
                return data;
            });
            get.addCallback(function(data){
                dojo.behavior.apply();
                if (idx == (idArray.length -1)) {
                    standby.hide();
                }
                return data;
            });
        }
    }
};