Javascript应用程序：糟糕的设计导致数百个ajax调用

我在论坛上就我在申请中遇到的一个问题发了一封邮件。虽然问题被标记为重复，但我尝试使用良好实践来解决问题。 经过多次尝试后，我的代码终于可以工作了，但并没有达到我预期的效果。 我正在使用插件制作一个应用程序。在对日历上的每个事件执行的“eventRender”回调中，我所做的回调进行了数百次ajax调用：@ 我想我不太明白那件事。 这是我的密码：

    $().ready(function() {
        var obterDadosCategorias = (function() {
            var dadosCategorias;

            var efetuarPost = function(callback){
                $.post(
                    "{{ baseRoute }}/cadastro/categoria/listar"
                    , {
                        "ajax": "true"
                    }
                ).done(function(data) {
                    var obj = $.parseJSON(data);
                    if (obj.result) {
                        callback(obj.data);
                    } else {
                        alert('Erro interno: não foi possível obter os dados das categorias');
                    }
                }).fail(function(){
                    alert('Erro interno: não foi possível obter os dados das categorias');
                });
            };

            return function(callback) {
                if (dadosCategorias) {
                    callback(dadosCategorias);
                    return;
                }

                efetuarPost(function(dados) {
                    dadosCategorias = dados;
                    callback(dados);
                });
            };
        })();

        $("#fullcalendar").fullCalendar({
            "eventRender": function(event, element, view) {
                if (view.name === "month") {
                    var beforeMonth = parseInt(event.end.format("YYYYMMDD")) < parseInt(view.intervalStart.format("YYYYMMDD"));
                    var afterMonth = parseInt(event.start.format("YYYYMMDD")) > parseInt(view.intervalEnd.clone().subtract(1, 'days').format("YYYYMMDD"));

                    if (beforeMonth || afterMonth) {
                        return false;
                    }
                }

                obterDadosCategorias(function(dadosCategorias) {
                    $(element).css("background-color", dadosCategorias["id_" + event.categoria].cor).css("color", textoBrancoOuPreto(dadosCategorias["id_" + event.categoria].cor));
                });

                return $(element);
            }
        });
    });

$（）.ready（函数（））{
var obterDadosCategorias=（函数（）{
var dadosCategorias；
var efetuarPost=函数（回调）{
美元邮政(
“{{baseRoute}}/cadastro/categoria/listar”
, {
“ajax”：“true”
}
).完成（功能（数据）{
var obj=$.parseJSON（数据）；
如果（目标结果）{
回调（对象数据）；
}否则{
警惕（“内部错误：不允许对数据进行分类”）；
}
}).fail（函数（）{
警惕（“内部错误：不允许对数据进行分类”）；
});
};
返回函数（回调）{
如果（数据分类）{
回调（数据分类）；
返回；
}
efetuarPost（功能（dados）{
护墙板=护墙板；
护墙板；
});
};
})();
$（“#fullcalendar”）。fullcalendar({
“eventRender”：函数（事件、元素、视图）{
如果（view.name==“月”）{
var beforeMonth=parseInt（event.end.format（“yyyyymmdd”）parseInt（view.intervalEnd.clone（）.subtract（1，'days'）.format（“yyyyymmdd”）；
如果（月前| |月后）{
返回false；
}
}
obterDadosCategorias（函数（数据分类）{
$（element）.css（“背景色”，dadostategorias[“id_“+event.categoria].cor”）.css（“颜色”，textoBrancoOuPreto（dadostategorias[“id_“+event.categoria].cor））；
});
返回$（元素）；
}
});
});

希望你们能帮助我D

---

提前感谢。

使用异步代码要求您以不同的方式思考函数的结构。不要想：“我需要编写一个返回值的函数”，你应该想“我需要编写一个函数，一旦我有了值，它就会执行一个操作。”

看来，AJAX调用只需要获取类别列表。当前，每次在日历上呈现事件时，都会发出该AJAX请求。相反，您应该只获取一次类别，然后在检索它们之后初始化日历

另一个关键点是在renderEvent处理程序中存储可以访问的类别。我在下面通过使用解决了这个问题，但您也可以使用全局变量（最好是名称空间）

我相信这段代码可以满足您的所有需求：

$(document).ready(function() {  

    $.post(
        "{{ baseRoute }}/cadastro/categoria/listar"
        , {
            "ajax": "true"
        }
    ).done(function(data) {
        $("#fullcalendar").fullCalendar({
            "eventRender": createRenderEvent($.parseJSON(data))
        });

    }).fail(function(){
        alert('Erro interno: não foi possível obter os dados das categorias');
    });

    function createRenderEvent(dadosCategorias) {
        return function(event, element, view) {
            if (view.name === "month") {
                var beforeMonth = parseInt(event.end.format("YYYYMMDD")) < parseInt(view.intervalStart.format("YYYYMMDD"));
                var afterMonth = parseInt(event.start.format("YYYYMMDD")) > parseInt(view.intervalEnd.clone().subtract(1, 'days').format("YYYYMMDD"));

                if (beforeMonth || afterMonth) {
                    return false;
                }
            }

            $(element).css("background-color", dadosCategorias["id_" + event.categoria].cor).css("color", textoBrancoOuPreto(dadosCategorias["id_" + event.categoria].cor));
            return $(element);
        }
    }

});

$（文档）.ready（函数（）{
美元邮政(
“{{baseRoute}}/cadastro/categoria/listar”
, {
“ajax”：“true”
}
).完成（功能（数据）{
$（“#fullcalendar”）。fullcalendar({
“eventRender”：createRenderEvent（$.parseJSON（数据））
});
}).fail（函数（）{
警惕（“内部错误：不允许对数据进行分类”）；
});
函数createRenderEvent（DadoStategorias）{
返回函数（事件、元素、视图）{
如果（view.name==“月”）{
var beforeMonth=parseInt（event.end.format（“yyyyymmdd”）parseInt（view.intervalEnd.clone（）.subtract（1，'days'）.format（“yyyyymmdd”）；
如果（月前| |月后）{
返回false；
}
}
$（element）.css（“背景色”，dadostategorias[“id_“+event.categoria].cor”）.css（“颜色”，textoBrancoOuPreto（dadostategorias[“id_“+event.categoria].cor））；
返回$（元素）；
}
}
});