$ интервал случается слишком много раз

Question

Надеюсь, я могу объяснить это, чтобы вы могли понять. Я только что закончил вопрос получения помощи с угловыми $interval функциональностью. Начнем с основ:

• У меня есть раскрывающийся список, в котором пользователь выбирает параметр.
• Это действие вызывает метод выбора, который делает запрос $http.get() .
• Полученные данные затем помещаются в список, используя mg-repeat.
• Данные может быть обновлен из другой службы, так что мне нужен этот список периодически опрашивать и обновить список, введите $interval

В этом коде ниже, я близок, но не совсем там. Скажем, я хочу обновлять список раз в 10 секунд, если я выберу вариант 1 с самого начала, он обновит список опций 1 каждые 10 секунд. Отлично?

Теперь, если я выберу вариант 2, в терминах, которые я понимаю, похоже, что он создает еще один поток. Он изменяет $http.get(), где он переходит от варианта 1 к варианту 2, но он поддерживает открытие 1 $interval нити. Таким образом, он пингует опцию 2's $http.get() дважды за 10 секунд. Однажды следуя временному интервалу первого запроса когда-либо (для варианта 1) и один раз в интервале меня выбирает вариант 2.

Вот код JS для функции выбора. Это происходит, когда пользователь выбирает что-то из выпадающего списка:

$scope.select = function() { 
     $scope.searchText = ''; 
     $scope.selectedItem = null; 
     var url = 'http:xxxxxxxxxxxx.com'; 
     url += $scope.selectModel.name; 
     console.debug("GOING TO: " + url); 
     $http.get(url).success(function(data2) { 
     $scope.records = []; 
     data2.forEach(function(r) { 
      $scope.records.push(r); 
     }); 
     }); 
     $interval(function() { 
     $http.get(url).success(function(data2) { 
     $scope.records = []; 
     data2.forEach(function(r) { 
      $scope.records.push(r); 
     }); 
     }); 
    }, 30000); 
}; 

А вот раздел HTML в вопросе:

<div style="margin: 1em"> 
<h4>Search</h4> 
     <div role="form"> 
      <!-- start dropdown --> 
      <div class="form-group"> 
       <select class="form-control" ng-options="model as model.name for model in allModels" ng-model="selectModel" ng-change="select()"> 
        <option value="">Choose Model</option> 
       </select> 
      </div> 
      <!-- /end dropdown--> 
      <div class="form-group"> 
       <input id="start_date" type="text" class="form-control" placeholder="Threat Date"> 
      </div> 
     </div> 
    <div> 
     <table class="table table-hover table-striped" ng-show="records"> 
      <thead> 
       <th>#</th> 
       <th>Name</th> 
       <th>Score</th> 
      </thead> 
      <tr data-ng-repeat=" item in records | orderBy : '-score' | limitTo : 10 " ng-click="moreInfo(item)"> 
       <td>{{$index+1}}</td> 
       <td>{{item.name.slice(5)}}</td> 
       <td>{{item.score.toFixed(3)}}</td> 
      </tr> 
     </table> 
    </div> 
</div> 

Позвольте мне знать, если мне нужно уточнить некоторые. Благодарю.

Answer 1

Вам необходимо отменить свой интервал.

// Activate 
var myInterval = $interval(....); 

// Deactivate 
$interval.cancel(myInterval); 
myInterval = undefined; // Necessary for conditional checking