Stop $ Timeout beim Starten des neuen Controllers

Question

Ich suche alle 2 Sekunden nach meinen Daten, um sie auf der Seite zu aktualisieren. Mein Problem ist, wenn ich eine andere Seite besuche, bleibt das Timeout aktiv. Wie kann ich meine Zeitüberschreitung abbrechen, wenn ich eine neue Seite besuche?

function IndexCtrl($scope, $timeout, RestData) { 
    $scope.rd = {}; 

    (function getRestDataFromServer() { 
     RestData.query(function(data){ 
      $scope.rd = data; 
      $timeout(getRestDataFromServer, 2000); 
     }); 
    })(); 
} 

// EDIT fand ich eine Lösung, aber ich bin nicht sicher, ob es ein gutes ist. Wenn ich mein Timeout im $ rootScope abspeichere, kann ich es in allen anderen Controllern abbrechen.

function IndexCtrl($scope, $rootScope, $timeout, RestData) { 
    $scope.rd = {}; 

    (function getRestDataFromServer() { 
     RestData.query(function(data){ 
      $scope.rd = data; 
      $rootScope.prom = $timeout(getRestDataFromServer, 2000); 
     }); 
    })(); 
} 

function newPageCtrl($scope, $rootScope, $timeout) { 
    $timeout.cancel($rootScope.prom); 
} 

Answer 1

Es gibt einige Winkelereignisse, die gesendet werden, wenn die Route geändert wird. Sie können innerhalb der IndexCtrl für sie hören $scope.$on verwenden und entsprechend handeln:

$ zerstören Ereignis

var promise = $timeout(getRestDataFromServer, 2000); 
... 

$scope.$on('$destroy', function(){ 
    $timeout.cancel(promise); 
}); 

$ locationChangeStart

var promise = $timeout(getRestDataFromServer, 2000); 
... 

$scope.$on('$locationChangeStart', function(){ 
    $timeout.cancel(promise); 
}); 

$timeout() gibt ein Versprechen Objekt. Dieses Objekt kann an $timeout.cancel() Funktion geliefert werden, um die Zeitüberschreitung zu löschen.

Answer 2

Stewie Antwort ist perfekt. Ich wollte nur diese einfache Hilfsfunktion teilen, die es nicht direkt mit $timeout verwenden, so dass ich nie wieder über dieses Thema nachdenken:

function setTimeout(scope, fn, delay) { 
    var promise = $timeout(fn, delay); 
    var deregister = scope.$on('$destroy', function() { 
     $timeout.cancel(promise); 
    }); 
    promise.then(deregister, deregister); 
} 

ich diese Funktion zu einem Dienst hinzugefügt genannt miscUtils, und ich spritze dieser Dienst anstelle der Injektion $timeout. Dann zum Beispiel ein „Update“ -Funktion zu machen, die alle 30 Sekunden läuft bis $scope zerstört wird:

update(); 
function update() { 
    // do the actual updating here 
    miscUtils.setTimeout($scope, update, 30000); 
} 

---

bearbeiten für diejenigen verwirrt darüber, was mit deregister los ist:

Diese Die Funktion registriert einen Listener für das Ereignis $destroy, aber sobald die Zeitüberschreitung abgeschlossen ist, ist sie nicht mehr erforderlich. Es gibt keine Zeitüberschreitung mehr zum Abbrechen. scope.$on gibt eine Funktion zurück, die den Listener abmeldet, wenn sie aufgerufen wird. So bereinigt promise.then(deregister) den nicht mehr benötigten Listener, sobald die Zeitüberschreitung abgeschlossen ist.