Arresta $ timeout all'avvio del nuovo controller

Question

Sto interrogando i miei dati ogni 2 secondi per tenerli aggiornati sulla pagina. Il mio problema è quando visito un'altra pagina il timeout rimane attivo. Come posso cancellare il mio timeout quando visito una nuova pagina?

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

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

// EDIT ho trovato una soluzione, ma non sono sicuro se è un buon compromesso. Quando salgo il timeout su $ rootScope, posso cancellarlo in tutti gli altri controller.

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

Ci sono un paio di eventi Angolari che vengono trasmessi quando il percorso viene modificato. È possibile ascoltare per loro all'interno del IndexCtrl utilizzando $scope.$on e agire di conseguenza:

$ distruggere evento

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() restituisce un oggetto promessa. Questo oggetto può essere fornito alla funzione $timeout.cancel() per annullare il timeout.

Answer 2

La risposta di Stewie è perfetta. Volevo solo condividere questa semplice funzione di supporto che uso invece di usare $timeout direttamente, in modo che non ho mai pensare a questo problema ancora:

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

ho aggiunto questa funzione per un servizio chiamato miscUtils, e mi inietto quel servizio invece di iniettare $timeout. Quindi, per esempio, per fare una funzione di "aggiornamento" che viene eseguito ogni 30 secondi fino a quando $scope è distrutto:

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

---

Modifica per coloro confuso su ciò che sta succedendo con deregister:

Questo la funzione registra un listener per l'evento $destroy, ma una volta completato il timeout non è più necessario; non c'è più un timeout da cancellare. scope.$on restituisce una funzione che, quando viene chiamata, cancella l'ascoltatore. Quindi, promise.then(deregister) pulisce quel listener non più necessario non appena termina il timeout.