Javascript AngularJS:eventRender函数在整个日历中执行了很多次

我在angularjs中使用完整的日历插件。

为完整日历的eventSource提供多个数组

$scope.eventSources = [$scope.list1, $scope.List2, $scope.List3];

在检查内部eventRender函数时；我知道它的执行次数超过了5公里，也影响了我的页面速度

那么，执行eventRender函数是否可能不超过list1、2和3的总计数

我尝试了eventAfterRender，但它没有按预期工作

任何帮助都将不胜感激

编辑： 下面是我的角度控制器代码。我将events数组更改为局部变量，并没有单独给出3个列表，而是将项目推送到单个数组中，并将其分配给eventSources

列表中的记录总数=90

(function () {

'use strict';

//Define controller signature
angular.module("ERPApp.Controllers")
    .controller("DashboardCtrl", [
        "$scope", "$rootScope", "$timeout", "DashboardService", "$http", "$filter", "$compile","$q",
        dashboardCtrl
    ]);


//Main controller function
function dashboardCtrl($scope, $rootScope, $timeout, DashboardService, $http, $filter, $compile, $q) {
    var events = [];
    $scope.leaves = [];

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $scope.FixedColorList = [{ text: 'Half Day', colorCode: '#F6BB43' }, { text: 'Full Day', colorCode: '#4B89DC' },
                             { text: 'Approved', colorCode: '#8DC153' }, { text: 'DisApproved', colorCode: '#E9573E' }];

    $scope.changeTo = 'Hungarian';


    /* Change View */
    $scope.changeView = function (view, calendar) {
        calendar.fullCalendar('changeView', view);
    };
    /* Change View */
    $scope.renderCalender = function (calendar) {
        calendar.fullCalendar('render');
    };

    /* event source that contains custom events on the scope */
    $scope.LoadEvents = function () {
        $rootScope.IsAjaxLoading = true;
        DashboardService.GetCalendarLeaveList().then(function (result) {
            if (result.data.IsValidUser) {
                if (result.data.MessageType == 1) {

                    events.length = 0; //empty event array
                    ProcessLeave(result.data.DataList, function () {
                        $scope.LoadFestivalList().then(function (result) {
                            ProcessFestival(result, function () {


                            });
                        });
                    });
                } else {
                    toastr.error(result.data.Message, 'Opps, Something went wrong');
                }
            } else {
                $rootScope.redirectToLogin();
            }
            $rootScope.IsAjaxLoading = false;
        });
    };
    $scope.LoadEvents();

    /*load festival list*/
    $scope.LoadFestivalList = function () {
        return DashboardService.GetFestivalList();
    };

    function ProcessLeave(arrayList, callback) {
        var prom = [];
        angular.forEach(arrayList, function (value, key) {
            var colorCode = value.Status == "Approved" ? $scope.FixedColorList[2].colorCode
                     : value.Status == "DisApproved" ? $scope.FixedColorList[3].colorCode
                     : value.PartFullTime == "F" ? $scope.FixedColorList[1].colorCode
                     : value.PartFullTime == "P" ? $scope.FixedColorList[0].colorCode
                     : "#000"; // default value

            prom.push(events.push({
                start: value.StartDate,
                color: colorCode,
                leave: true
            }));

            $scope.leaves.push($filter('date')(value.StartDate, 'dd-MM-yyyy'));
        });

        $q.all(prom).then(function () {
            callback();
        });
    }

    function ProcessFestival(result, callback) {
        var prom = [];
        if (result.data.IsValidUser) {
            angular.forEach(result.data.DataList, function (value, key) {  

                if ($scope.leaves.indexOf($filter('date')(value.FestivalDate, 'dd-MM-yyyy')) < 0) {
                    prom.push(events.push({
                        start: value.FestivalDate,
                        color: value.DisplayColorCode,
                        holiday: value.IsWorkingDay == 0 ? true : false
                    }));
                }
            });

            $q.all(prom).then(function () {
                callback();
            });
        } else {
            $rootScope.redirectToLogin();
        }
    }

    /* config object */
    $scope.test = 0;
    $scope.uiConfig = {
        calendar: {
            editable: false,
            header: {
                left: 'title',
                right: 'prev,next'
            },
            timeFormat: {
                '': ''
            },
            eventRender: function (event, eventElement, monthView) {
                $scope.test++;
                if (event.holiday) {
                    $("td[data-date='" + $filter('date')(event.start, "yyyy-MM-dd") + "']").css({ "background-color": event.color, "border": "1px solid #FFFFFF" });
                } else if (!event.holiday) {
                    $("td[data-date='" + $filter('date')(event.start, "yyyy-MM-dd") + "']").css({ "background-color": event.color, "border": "1px solid #FFFFFF" });
                } else if (event.leave) {
                    $("td[data-date='" + $filter('date')(event.start, "yyyy-MM-dd") + "']").css({ "background-color": event.color, "border": "1px solid #FFFFFF" });
                }
            }
        }
    };


    /* event sources array*/
    $scope.eventSources = [events];
};

（函数（）{
"严格使用",；
//定义控制器签名
角度模块（“应用程序控制器”）
.controller（“仪表板Ctrl”[
“$scope”、“$rootScope”、“$timeout”、“DashboardService”、“$http”、“$filter”、“$compile”、“$q”，
仪表板Ctrl
]);
//主控制器功能
函数dashboardCtrl（$scope、$rootScope、$timeout、DashboardService、$http、$filter、$compile、$q）{
var事件=[]；
$scope.leaves=[]；
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
$scope.FixedColorList=[{text:'半天'，颜色代码：'#F6BB43'}，{text:'全天'，颜色代码：'#4B89DC'}，
{文本：'已批准'，颜色代码：'#8DC153'}，{文本：'未批准'，颜色代码：'#E9573E'}]；
$scope.changeTo=‘匈牙利语’；
/*改变看法*/
$scope.changeView=函数（视图、日历）{
日历.fullCalendar（'changeView'，view）；
};
/*改变看法*/
$scope.rendercarbander=功能（日历）{
日历。完整日历（“呈现”）；
};
/*包含作用域上自定义事件的事件源*/
$scope.LoadEvents=函数（）{
$rootScope.IsAjaxLoading=true；
DashboardService.GetCalendarLeaveList（）.then（函数（结果）{
if（result.data.IsValidUser）{
if（result.data.MessageType==1）{
events.length=0；//空事件数组
ProcessLeave（result.data.DataList，函数（）{
$scope.loadFesticalList（）.then（函数（结果）{
ProcessFestival（结果、函数）{
});
});
});
}否则{
toastr.error（result.data.Message，“Opps，出了点问题”）；
}
}否则{
$rootScope.redirectToLogin（）；
}
$rootScope.IsAjaxLoading=false；
});
};
$scope.LoadEvents（）；
/*加载节日列表*/
$scope.LoadFestivalList=函数（）{
返回DashboardService.getFestival列表（）；
};
函数ProcessLeave（arrayList，回调）{
var prom=[]；
forEach（数组列表，函数（值，键）{
var colorCode=value.Status==“已批准”？$scope.FixedColorList[2]。colorCode
：value.Status==“未批准”？$scope.FixedColorList[3]。颜色代码
：value.PartFullTime==“F”？$scope.FixedColorList[1]。颜色代码
：value.PartFullTime==“P”？$scope.FixedColorList[0]。颜色代码
：“#000”；//默认值
prom.push（events.push({
开始：value.StartDate，
颜色：颜色代码，
离开：真的
}));
$scope.leaves.push（$filter（'date'）（value.StartDate，'dd-MM-yyyy'））；
});
$q.all（prom）.然后（函数（）{
回调（）；
});
}
函数ProcessFestival（结果、回调）{
var prom=[]；
if（result.data.IsValidUser）{
forEach（result.data.DataList，函数（值，键）{
if（$scope.leaves.indexOf（$filter（'date'）（value.festivalate，'dd-MM-yyyy'））<0）{
prom.push（events.push({
开始：value.festivalate，
颜色：value.DisplayColorCode，
假日：value.IsWorkingDay==0？真：假
}));
}
});
$q.all（prom）.然后（函数（）{
回调（）；
});
}否则{
$rootScope.redirectToLogin（）；
}
}
/*配置对象*/
$scope.test=0；
$scope.uiConfig={
日历：{
可编辑：false，
标题：{
左：'标题'，
右图：“上一页，下一页”
},
时间格式：{
'': ''
},
eventRender:函数（事件、eventElement、monthView）{
$scope.test++；
if（活动、假日）{
$（“td[data date='”+$filter（'date'）（event.start，“yyyy-MM-dd”）+“']”）css（{“background color”：event.color，“border”：“1px solid 35; FFFFFF”}）；
}如果（！event.holiday）{
$（“td[data date='”+$filter（'date'）（event.start，“yyyy-MM-dd”）+“']”）css（{“background color”：event.color，“border”：“1px solid 35; FFFFFF”}）；
}else if（事件离开）{
$（“td[data date='”+$filter（'date'）（event.start，“yyyy-MM-dd”）+“']”）css（{“background color”：event.color，“border”：“1px solid 35; FFFFFF”}）；
}
}
}
};
/*事件源阵列*/
$scope.eventSources=[events]；
};

---

})（）

我也在使用fullcandar，它的工作原理与预期一样：在渲染日历时，推入eventSources的每个事件都会触发eventRender

您确定日历只渲染一次吗

您的列表中有多少项

希望t