如何减慢 Ajax 调用？

Question

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

提前感谢您的帮助和时间。

Answer 1

您遇到的问题与异步函数或 AJAX 中的 A 有关。如果你不知道什么是异步函数，还有很多人比我能解释得更好，所以给个谷歌吧。

如果没有 alert() 会发生什么情况，您的代码会进行 4 次服务器调用，但在您得到任何响应之前，所有 4 次都已发送出去。使用alert()（或setTimeout），您可以在发出下一个呼叫之前给代码时间来接收对呼叫的每个响应。

有几种方法可以解决这个问题，第一种方法是在第一个调用收到响应后调用下一个调用。第二种方法是使用异步函数在不同的链上一次调用所有 4 个（？）。我不是最擅长解释这部分的，但是在 SO 和在线上可以找到很多代码。

Answer 2

我认为您的代码中存在更普遍的问题，因为您似乎需要延迟执行以等到某事。 else 已完成，而不是在完成时通知。

最让我烦恼的就是这一句

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

更新到底在做什么？它是如何实施的？ 我认为它会做某事。喜欢divCategorie.innerHTML += ajaxPage.texte;
Wich 非常不利，因为浏览器必须解析和重建，无论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);
    }

我认为您应该进行一些重大的重构。并查看 Promises。

// * -> 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"));

Answer 3

我可能会因为提到这一点而被否决，因为这不是推荐的程序，但我相信每个编码人员都应该掌握所有事实。

在 jQuery AJAX 构造中，有一个选项 async:false, 将延迟脚本继续执行，直到 AJAX 完成处理。不用说，如果 AJAX 出现问题，浏览器可能会死机。 很大程度上取决于你的用户是谁，以及流量——在我的十个用户内部项目中，这是一个可以接受的解决方案。

$.ajax({
    async: false,
    type: 'post',
     url: 'ajax/ax.php',
    data: 'request=',
    success: function(d){
        if (d.length) alert(d);
    }
});

参考：

What does "async: false" do in jQuery.ajax()?

---

不过，更好的办法是查看 Promises 接口，使用 .when() 和 .then() 等方法

参考资料：

https://jsfiddle.net/v86bc028/2/

http://jqfundamentals.com/chapter/ajax-deferreds#

http://digitizor.com/jquery-html-callback-function-using-promise/#

how does jquery's promise method really work?