$ Timeout in AngularJS verwenden

Question

Ich habe AngularJS factory verwendet, um ein neues Instanzmodell für mein Projekt zu erstellen, und jedes Modell enthält einen Fortschrittswert, der inkrementiert, pausiert und auf 0 basierend auf "start", "pause" zurückgesetzt wird. und "stop" Benutzeraktionen.

app.factory('ModelA', ['$timeout', function($timeout) { 
    function ModelA(progress) { 
     this.progress = progress; 
    }; 

    ModelA.prototype = { 
     startProgress: function() { 
      this.counterFunction(); 
     }, 
     counterFunction: function() { 
      this.progress++; 
      if(this.progress == 100) { 
       this.progress = 0; 
      } 
      //console.log(this.progress); 
      //console.log(this.counterFunction); 
      progressTimeout = $timeout(this.counterFunction, 1000); 
     }, 
     // Haven't tested the method below 
     pauseProgress: function() { 
      $timeout.cancel(progressTimeout); 
     }, 
     stopProgress: function() { 
      $timeout.cancel(progressTimeout); 
      this.progress = 0; 
     } 
    }; 
    return ModelA; 
}]); 

Aus irgendeinem Grund, wenn ich startProgress() in der ng-click Ausdruck Funktion aufrufen, wird der Fortschritt 1 erhöhen und dann stoppen. Ich fügte Protokolle hinzu, um this.counterFunction für jeden Anruf zu überprüfen. Ich erkannte, dass es nur 1 und das ganze counterFunction auf dem ersten Mal druckt. Wie beim zweiten Mal wird this.progressNaN sein und die CounterFunction zeigt undefined.

Ich bin neu in AngularJS, könnte mir bitte jemand helfen? Vielen Dank.

Answer 1

Das this Objekt in der Funktion durch die $timeout genannt, das heißt this.counterFunciton ist nicht die ModelA Instanz, deshalb sollten Sie $timeout(this.counterFunction.bind(this), 1000) stattdessen verwenden.

Sie können diese article über Bindung this Objekt in JavaScript nachlesen.

Eine funktionierende codepen für Ihre Referenz.

Answer 2

Der Ausführungskontext this ändert sich, wenn das $ timeout ausgeführt wird. Sie müssten das ModelA this in $ timeout beibehalten (this.counterFunction.bind (this), 1000). Sie binden und übergeben die this an diese.counterFunction und somit hat counterFunction den richtigen Zugriff auf this.progress.

Überprüfen Sie hier weitere Informationen über die this Problem hier. $ timeout ist der Wrapper für window.setTimeout