javascript 窗帘（用于指示繁忙的进程）未显示整个进程。可能我对回调的理解不够

Question

我有一个流程，用户放入一个逗号分隔的列表，然后一次处理一个项目。我希望能够向用户表明它正在处理，并让他们知道它何时完成。所以我使用了 Borgar 重播中的窗帘创意 ...在页面上划分。 这很有效，但在该过程完成之前窗帘就消失了。我相信这是因为 importIDs 函数内 forEach 循环中的每个调用都是异步调用的，从而在完成之前返回控制权。 （我知道这就是异步代码背后的想法。）那么我需要做什么才能保持帷幕直到完成？

调用函数

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

import 函数

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

};

的 HTML ，该函数调用 busy 函数，

    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;
};

而 busy 函数又处理传入的循环，该循环为数组中的每个元素调用 doAssosiate：

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

它使用 getDefered 运行每个 url

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

};

我想我有上面所有相关的代码。我认为使用通过繁忙的进程发送循环将保持直到完成然后返回，而不是它保持直到它触发每个迭代，然后在完成之前返回。

一如既往地感谢您的任何意见和批评。

Answer 1

上面有几个有趣的错误。主要是如果数组中的 id 列表太大，它会在数据库中处理更多的流量，然后它就可以处理。所以我使用了递归函数而不是 foreach 循环。然后从 busyProcess 函数中删除了关闭窗帘的责任，并将其添加到在递归退出时关闭窗帘的递归调用中。对于任何关心的人，下面是更改后的功能。同时更改为使用 dojox.widget.Standby 作为窗帘。

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

    return ret;
};

现在不再调用 doAssosiate，而是调用 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;
            });
        }
    }
};