Javascript 应用程序 : bad design makes hundreds of ajax calls

Question

我做了一个 question关于我在申请中遇到的问题的论坛。尽管问题被标记为重复，但我尝试使用好的做法来解决问题。经过非常多的尝试，我的代码终于可以工作了，但不是我预期的那样。我正在使用 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);
            }
        });
    });

希望大家帮帮我。 :D提前致谢。

Answer 1

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

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

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

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

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

});