Javascript 如何降低Ajax调用的速度？

我在JS中有一个函数，它包含一个循环，每次迭代调用一个AJAX调用。调用将

checked

元素插入数据库，并在下一节的同一页面中返回这些元素的结果

我的问题是，当我检查3个组中的4个复选框时，最后一个组中唯一的复选框会添加到页面中。但是，当我使用

alert（）

时，我可以看到所有元素

我使用了setTimeout，但代码中有错误。我还增加了线路，以便给AJX通话留出更多时间，但问题仍然存在。因此，我想知道是否有一种方法可以在不使用

alert（）

的情况下降低代码的速度

这是我的剧本：

addAptitudeField : function(currentAutocompleteField, idChamp) {

    var currentAutocompleteFieldBind = currentAutocompleteField;
    var idChampBind = idChamp;

    window.setTimeout(function() {

        // Code ...

        var paramDwr = {};
        var newDivName = "div" + idChamp + lastValueId;
        paramDwr[attributs.r_divId] = newDivName;
        paramDwr[attributs.r_currentValue] = currentValue;
        paramDwr[attributs.r_hiddenIdsField] = hiddenIdsField.id;
        paramDwr[attributs.r_lastValueId] = lastValueId;
        paramDwr[attributs.r_itemmod] = nbAptitudesCat % 2 == 0;

        // setTimeout ( RepertoireDwr.ligneSuppEtSpanMessage, 1000 ) doesn't work

        RepertoireDwr.ligneSuppEtSpanMessage(paramDwr, function(ajaxPage) {
            divCategorie.update(divCategorie.innerHTML + ajaxPage.texte);
            aptitudeAvecDetail.remetsValeursStockees();
            var btnSuppression = $(newDivName).getElementsByTagName('img')[0];
            btnSuppression.setAttribute("onclick", "formulaireFiche.updateCSS('" + newDivName + "');" + btnSuppression.getAttribute("onclick") + "fiche.updateCategorieSuppressionAptLieeUo(\'divCat" + currentCategorie + "\');"); });
            }
        //
        // alert() : It works in this case.
        //

        // for (var i=0; i<5000000; i++) ; it doesn't work

        }, 400);
    }

addAptitudeField:函数（currentAutocompleteField，idChamp）{
var currentAutocompleteFieldBind=currentAutocompleteField；
var idChampBind=idChamp；
setTimeout（函数（）{
//代码。。。
var paramDwr={}；
var newDivName=“div”+idChamp+lastValueId；
paramDwr[attributes.r_divId]=newDivName；
paramDwr[attributes.r_currentValue]=currentValue；
paramDwr[attributes.r\u hiddenIdsField]=hiddenIdsField.id；
paramDwr[attributes.r\u lastValueId]=lastValueId；
paramDwr[attributes.r_itemmod]=nbAptitudesCat%2==0；
//setTimeout（RepertoireDwr.ligneSuppEtSpanMessage，1000）不起作用
RepertoireDwr.lignesuppetspan消息（参数、函数（ajaxPage））{
更新（divCategorie.innerHTML+ajaxPage.texte）；
aptitudeAvecDetail.remetsvaleurstockees（）；
var btnSuppression=$（newDivName）.getElementsByTagName（'img'）[0]；
btnSuppression.setAttribute（“onclick”，“formulaireFiche.updateCSS（“+newDivName+”）；“+btnSuppression.getAttribute（“onclick”）+“fiche.updatecategoriesuppressionapletieuo（\'divCat“+currentCategorie+“\”）；”）；
}
//
//alert（）：在这种情况下它可以工作。
//
//对于（var i=0；i您遇到的问题涉及异步函数，或者AJAX中的A。如果您不知道异步函数是什么，那么有许多其他人可以比我更好地解释它，所以请使用google

如果没有中的
alert（）
，代码会发出4个严重调用，但在收到任何响应之前，所有4个都会被发送出去。使用
alert（）
（或setTimeout），代码会在下一个响应发出之前有足够的时间接收每个响应

有几种方法可以实现这一点，第一种方法是在第一个收到响应后调用下一个调用。第二种方法是使用异步函数在不同的链上同时调用所有4个（？）。我不擅长解释这一部分，但在SO和在线上可以找到大量代码。
您遇到的问题涉及异步函数，或者AJAX中的A。如果您不知道异步函数是什么，那么有许多其他人可以比我更好地解释它，所以请使用google

如果没有中的
alert（）
，代码会发出4个严重调用，但在收到任何响应之前，所有4个都会被发送出去。使用
alert（）
（或setTimeout），代码会在下一个响应发出之前有足够的时间接收每个响应

有几种方法可以实现这一点，第一种方法是在第一个收到响应后调用下一个调用。第二种方法是使用异步函数在不同的链上同时调用所有4个（？）.我不擅长解释这一部分，但在SO和在线上可以找到大量代码。
我认为您的代码中有一个更普遍的问题，因为您似乎需要延迟执行，以等待其他内容完成，而不是在完成时得到通知

最让我恼火的是这一行

divCategorie.update(divCategorie.innerHTML + ajaxPage.texte);

更新到底在做什么？它是如何实现的？
我假设它做了类似于
divCategorie.innerHTML+=ajaxPage.texte；


这是非常不利的，因为浏览器必须解析和重建
divCategorie.innerHTML
中已有的内容

只添加新的标记会更好

长话短说：也许一个好方法是插入一些隐藏的节点作为占位符（这样你就可以保持顺序，尽管AJAX请求可能会以不同的顺序返回），并在节点到达后立即用真正的内容替换该节点

有点像这样：

addAptitudeField : function(currentAutocompleteField, idChamp) {

    var currentAutocompleteFieldBind = currentAutocompleteField;
    var idChampBind = idChamp;

    //this is done immediately, and therefore preserves the order of the loop, 
    //without any delays/timeouts
    var placeholder = document.createElement("div");
        placeholder.className = "placeholder";
        placeholder.style.display = "none";
    divCategorie.appendChild(placeholder);

    window.setTimeout(function() {

        // Code ...

        var paramDwr = {};
        var newDivName = "div" + idChamp + lastValueId;
        paramDwr[attributs.r_divId] = newDivName;
        paramDwr[attributs.r_currentValue] = currentValue;
        paramDwr[attributs.r_hiddenIdsField] = hiddenIdsField.id;
        paramDwr[attributs.r_lastValueId] = lastValueId;
        paramDwr[attributs.r_itemmod] = nbAptitudesCat % 2 == 0;

        // setTimeout ( RepertoireDwr.ligneSuppEtSpanMessage, 1000 ) doesn't work

        RepertoireDwr.ligneSuppEtSpanMessage(paramDwr, function(ajaxPage) {
            //convert the passed text into a DocumentFragment
            var frag = fragment(ajaxPage.texte);

            //replacing the placeholder with the fragment
            divCategorie.insertBefore(frag, placeholder);
            divCategorie.removeChild(placeholder);

            aptitudeAvecDetail.remetsValeursStockees();
            var btnSuppression = $(newDivName).getElementsByTagName('img')[0];
            //this is also pretty horrible to me:
            btnSuppression.setAttribute("onclick", "formulaireFiche.updateCSS('" + newDivName + "');" + btnSuppression.getAttribute("onclick") + "fiche.updateCategorieSuppressionAptLieeUo(\'divCat" + currentCategorie + "\');"); });
            }
        }, 400);
    }

我认为你应该做一些重大的重构，看看承诺

// * -> DocumentFragment
//strings/primitives are parsed as HTML-markup, 
//null / undefined is ignored
//Arraylike structures are parsed recursively
var fragment = (function(container){
    return function(src){
        return reducer(document.createDocumentFragment(), src);
    }

    function reducer(frag, node){
        var i, len, fc, c, r;
        if(node === Object(node)){
            if("nodeType" in node){
                //dom nodes
                frag.appendChild(node);
            }else{
                //Arraylike structures, like NodeLists or jQuery-Objects, or just plain Arrays
                for(i = 0, len = ("length" in node && node.length)|0, r = reducer; i < len; (i in node) && r(frag, node[i]));
            }
        }else if(node != null) {
            //strings (all primitives)
            for((c=container).innerHTML = node; fc = c.firstChild; frag.appendChild(fc));
        }
        return frag;
    }
})(document.createElement("div"));

/*->DocumentFragment
//字符串/原语被解析为HTML标记，
//忽略空/未定义
//类数组结构是递归解析的
变量片段=（函数（容器）{
返回函数（src）{
返回减速机（document.createDocumentFragment（），src）；
}
功能减速机（框架、节点）{
变量i、len、fc、c、r；
如果（节点===对象（节点））{
if（节点中的“节点类型”）{
//dom节点
frag.appendChild（节点）；
}否则{
//类似于数组的结构，如节点列表或jQuery对象，或者只是普通数组
对于（i=0，len=（“长度”在节点和节点长度中）0，r=reducer；i
我认为您的代码中有一个更普遍的问题，因为您似乎需要延迟执行，以等待其他任务完成，而不是在完成时得到通知

最让我恼火的是这一行

divCategorie.update(divCategorie.innerHTML + ajaxPage.texte);

更新到底在做什么？它是如何实现的？
我想它会做些什么，比如
divCategor