javascript - ng-repeat 内的 AngularJS 倒计时

Question

我有一个小型 AngularJS 应用程序，它使用 JSON 来搜索和检索用户列表以及他们的下一次安排的 session (假设安排在接下来的 8 小时内安排一次)，时间格式为 UTC，以便于计算到本地时间。每个用户可以有不同的状态(忙碌直到 x 时间，空闲直到 x 时间)。

我想要完成的是能够更新 DOM，其中包含预定 session 完成之前的剩余时间或 session 开始之前的剩余时间。我有一些代码可以工作，但是因为我显然没有正确执行此操作，结果集中只有几个条目，它使浏览器几乎停止运行。任何建议将不胜感激!

我当前的代码由以下片段组成:

[主页]

<tr ng-repeat="item in pagedItems[currentPage-1] | orderBy:sortingOrder:reverse" ng-class="{success:item._freeBusy=='Free', error:item._freeBusy=='Busy'}">
       <td>{{item._firstName}}</td>
       <td>{{item._lastName}}</td>
       <td>{{item._facilityName}}</td>
       <td>{{item._extension}}</td>
       <td>{{item._description}}</td>
       <td><a ng-hide="!item._extension" ng-click="dial(item)">Dial</a></td>
       <td><button class="btn btn-primary" ng-click="openDetails(item)">Details</button></td>
       <td>{{item._freeBusy}} {{item._timeLeft}} {{calculateTime(item._freeBusyTime,$index)}}</td>
 </tr>

[ Controller ]

        $scope.timeUntil = function(s) {
        function isoToObj(s) {
            var b = s.split(/[-T+:]/i);
            return new Date(Date.UTC(b[0], --b[1], b[2], b[3], b[4], b[5]));
        }
        // Utility to add leading zero
        function z(n) {
            return (n < 10 ? '0' : '') + n;
        }
        // Convert string to date object
        var d = isoToObj(s);
        var diff = d - new Date();
        // Allow for previous times
        var sign = diff < 0 ? '-' : '';
        diff = Math.abs(diff);
        // Get time components
        var hours = diff / 3.6e6 | 0;
        var mins = diff % 3.6e6 / 6e4 | 0;
        var secs = Math.round(diff % 6e4 / 1e3);
        // Return formatted string
        return sign + z(hours) + ' Hours ' + z(mins) + ' Min' + ':' + z(secs);// + ':' + z(secs)
    }

    $scope.calculateTime = function(s, idx) {
        timeoutID = $timeout(function() {
            $scope.items[idx]._timeLeft = $scope.timeUntil(s);
            $scope.calculateTime(s, idx);
        }, 1000);
    };

编辑

我理解下面提到的问题，我正在努力解决的是如何正确注册这个问题。因为一次更新可能需要多达 15 次以上的单独更新，这就是我迷失的地方。

Answer 1

您注册的超时比您想象的要多。每次 Angular 渲染您的 View 时，您都会注册新的超时处理程序。添加回调计数器并观察计数:

$scope.called = 0;

$scope.calculateTime = function(s, idx) {
    timeoutID = $timeout(function() {
        $scope.items[idx]._timeLeft = $scope.timeUntil(s);
        $scope.calculateTime(s, idx);
        console.log(++$scope.called);
    }, 1000);
};

请参阅我重现该错误的地方:http://plnkr.co/edit/qJ4zDl6gc5C7Edg0T0gB 。只需运行它并观察计数器即可。

为什么要在渲染周期中更新_timeLeft？为什么不这样做:

$scope.called = 0;

setInterval(function() {
  angular.forEach($scope.items, function function_name(item) {
    item._timeLeft = $scope.timeUntil(item._freeBusyTime);
  });
  console.log(++$scope.called);
  $scope.$apply();
}, 1000);

查看新插件:http://plnkr.co/edit/rVJ6p4VXDQvt7rjT6eka