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

Question

我在论坛上就我在应用程序中遇到的一个问题提出了一个问题。尽管这个问题被标记为重复，但我试着用良好的做法来解决这个问题。经过多次尝试，我的代码finnaly可以工作，但并没有达到我预期的方式。我正在使用Fullcalendar插件制作一个应用程序。在对日历上的每个事件执行的"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);
            }
        });
    });

希望你们能帮助我提前谢谢。

Answer 1

使用异步代码需要以不同的方式思考函数的结构。不是想："我需要写一个返回值的函数"，而是应该想"我需要编写一个一旦有值就执行操作的函数"

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

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

我相信这个代码完成了你想要的一切：

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