Question

我在我的角度应用程序中遇到了一些严重的性能问题，肯定是由于我的重复实施不好，但我不知道如何做得更好。我尝试了其他一些组合，但没有一个给我我想要的结果，也没有更好的表现。由于异步和$ digest中止，存在一些无限循环，未定义的变量。它应该是这样看的（这是工作结果，但现在还没有优化）：http://scr.hu/0ei9/8bpw9

蓝色细胞天数=用户存在，红色细胞=缺席。下面是每天的“轮班”（每个班次都可以在不同的日子里完成）。

当我在console.log中调用某些函数时，它们被调用的次数比需要的多，例如 isPresent （用于检查用户是否将当天提交为可用）被称为5x180（180可能是5个用户x月30天）和 getDayOfWeek （用于班次行的模板）28 + 840 + 812 ......有10个班次。

然而我通常需要为所有单元格调用isPresent仅1x180，并且对于一个班次行调用getDayOfWeek，每月1x30天。也就是说，我真的不知道为什么它被称为sooo多次以及如何优化它。

另外，当我点击蓝色单元格时，会调用 setShift（）函数。我在这里复制了这个函数，但是没有分析它，我只是想表明它无处调用任何以前的函数，但是我控制台.log一周两周令人印象深刻的28x“+ 180”存在“和+ 812 “一周中的天”。不知道它来自哪里......坦率地说，我点击的一切都叫同样的 - 如果我改变月份，年份，点击一个独立的按钮...

我省略了一些类和css以获得更好的代码阅读。

感谢您的帮助。

修改

在评论和退出一些代码后，我发现当我调用setShift（）函数时，大多数不需要的日志来自最后一个子调用：showPopover（），我打开一个$ modal。评论时，我曾经看过1/3。在模态出现之前，剩下这些东西了。此外，我认为temlpateUrl可能是原因，因为在评论时它不会记录所有那些'存在'和'星期几'。当我点击模态的任何地方时，它会回忆起所有这些功能。有任何想法吗？

JS角度函数

            $scope.isPresent = function(day, month, year, userId) {
              console.log('is present')
              var date = new Date(year, month - 1, day + 1)
              var day = moment(date).format("D-M-YYYY");
              for (var i = 0; i < $scope.presences.length; i++) {
                var presentDay = moment($scope.presences[i].start).format("D-M-YYYY")
                if (presentDay == day && userId == $scope.presences[i].coursierId) {
                  return true
                }
              }
            }

            $scope.getDayOfWeek = function(day, month, year) {
                console.log('day of the week')
                var date = new Date(parseInt(year), month - 1, day + 1)
                var dayId = date.getDay();
                return dayId;
              }
              /*
                used for a limited ng-repeat
              */
            $scope.getTimes = function(n) {
              return new Array(n);
            };


            /*
              Shows a list of sorted out shifts with corresponding
              hours, cities and capabilities of coursier.
            */
            $scope.setShift = function(day, month, year, userId, event) {
              var date = new Date(year, month - 1, day)
              var day = moment(date).format("D-M-YYYY");
              var dayOfWeek = moment(date).day()
                //SORT SHIFTs BY DAY OF WEEK clicked
              var day_shifts = $scope.sortShiftByDayOfWeek(dayOfWeek)
                //console.log(day_shifts)
                //check if the day clicked is an dispo present day
              for (var i = 0; i < $scope.presences.length; i++) {
                var dispoDay = moment($scope.presences[i].start).format("D-M-YYYY")
                  //if yes, check the presence user id and the cell of user clicked
                if (dispoDay == day) {
                  //then get all the shifts that fit into this coursier's time range
                  if ($scope.presences[i].coursierId == userId) {
                    var dispo = $scope.presences[i];
                    var dispoHours = $scope.getDispoHoursAndDay(dispo);
                    var time_shifts = $scope.compareDiposHoursAndShift(dispoHours, day_shifts);
                    //then sort the shifts by the dispo's and shift's cities
                    var time_city_shifts = $scope.compareDispoCityAndShift(time_shifts, dispo);
                    var time_city_able_shifts = $scope.compareUserAndShift(time_city_shifts, userId);
                    $scope.showPopover(time_city_able_shifts, event);
                  }
                };
              };
            }

###Calendar table
<table class="table table-bordered">
  <!--days of month-->
  <tr class="mainHeader">
    <th>coursier/jour</th>
    ##calendar.days = 30 days of month, for example
    <th class="monthDay" ng-repeat=" numDay in [] | range: calendar.days">{{$index+1}} {{calendar.daysNames[$index]}}
    </th>
  </tr>

  <!-- user name and days -->
  <tr ng-repeat="user in coursiers">
    <!-- <td class="coursierName">nom coursier</td> -->
    <td>
      <a href="#"> {{user.name}}</a> 
    </td>
    <td ng-click="setShift($index+1, monthNum,year, user._id, $event)" ng-repeat="numDay in getTimes(calendar.days) track by $index" ng-class=" isPresent($index, monthNum,year, user._id) == true ?   
           'present' : isAbsent($index, monthNum,year, user._id) == true ?  
           'absent' : '' ">
    </td>
  </tr>

  <tr>
    <td>Shifts par jour</td>
    <td class="shiftsParJourCell" ng-repeat="day in getTimes(calendar.days) track by $index">
      <span ng-repeat="shift in shifts">
                <span ng-repeat="jour in shift.jours">
                  {{jour.id == 
                    getDayOfWeek($parent.$parent.$index, monthNum, year) ? shift.nom : ''}}
                </span>
      </span>
    </td>
  </tr>
</table>

Answer 1

过了一段时间，在我的情况下问题是我没有使用指令。范围内有不必要的交互（仍然不知道为什么）但是在角度指令中分离我的html后到目前为止没有问题。

角度性能问题，重复次数，不必要的回调

修改

JS角度函数

1 个答案: