多次调用同一函数时，请跟踪每个$ timeout

Question

$scope.fetchStatus = function (job) {
        $http
            .get('http://gtrapi/pool/checkStatus/' + sessionId + '/' + job.jobId)
            .success(function (response) {
                job[job.jobId] = response;

                if (response.status !== 'InProgress') {
                    $scope.refreshDataTimeout = $timeout($scope.fetchStatus(job), 1000);
                }
            })
            .error (function () {

            });
};

Here is my HTML code

  <div ng-repeat="job in gtrLogs" class="each-log">
            <div class="row job-id">
                <div class="col-xs-2">
                    Job ID: {{job.jobId}}
                </div>
                <div class="col-xs-10">
                    End Point: {{job.changes.endpoint}}
                </div>
            </div>
            <div class="each-job" ng-init="fetchStatus(job)">
                <div class="job-header row">
                    <span class="col-xs-6">Job Status: <strong>{{job[job.jobId].status}}</strong>
                        <span class="glyphicon" ng-class="{'glyphicon-refresh spin' : job[job.jobId].status === 'InProgress', 'glyphicon-ok' : job[job.jobId].status === 'submitted', 'glyphicon-remove' : job[job.jobId].status === 'Aborted'}"></span>
                    </span>
                    <span class="col-xs-6">
                        <span class="glyphicon glyphicon-stop pull-right" ng-click="stopLogs()" tooltip="Stop Action"></span>
                        <span class="glyphicon glyphicon-repeat pull-right" ng-click="rollBack()" tooltip="Roll Back"></span>
                    </span>
                </div>
                <div class="logs-progress">
                    <table class="table table-striped table-condensed table-hover">
                        <thead>
                        <tr>
                            <th>
                                Message
                            </th>
                            <th>
                                Time
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="row in job[job.jobId].logs">
                            <td>{{row.msg}}</td>
                            <td>{{row.time | date:'yyyy/MM/dd HH:mm:ss'}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>                      

I have to update the data every second and placed $timeout in the function. But because the function is being called multiple times from the HTML the calls are nested. How Do I keep polling with respect to the same job.

Answer 1

Since you have a unique jobid, use can use that to maintain an array of key value pairs where your job id can correspond to a unique counter.

var counters = [];

$scope.fetchStatus = function (job) {
    $http
        .get('http://url:9090/gtrapi/pool/checkStatus/' + sessionId + '/' + job.jobId)
        .success(function (response) {
            job[job.jobId] = response;

            if (response.status !== 'InProgress') {
                updateCounter(job.jobId);

                $scope.refreshDataTimeout = $timeout($scope.fetchStatus(job), 1000);
            }
        })
        .error (function () {
        });
};

function updateCounter(jobId) {
    var exists = false,
        jobId = parseInt(jobId);

    for (var i in counters) {
        if (counters[i].id === jobId) {
            projects[i].counter++;
            exists = true;
            break;
        } 
    }  

    if (!exists) {
        counters.push({id: jobId, counter: 0});
    }
}