CreateJS dynamisches Textfeld nicht jede Sekunde aktualisieren HTML 5 Canvas in animieren

Question

Im folgenden Code habe ich ein einfaches Timer-Skript, das im Grunde von 30 Sekunden auf 0 herunter zählt. Ich möchte die aktuelle Sekunde auf dem Bildschirm anzeigen lassen Bühne.

this.stop(); 

//COUNTDOWN TIMER 
var minute = 0; 
var second = 30; 

var clock = setInterval(function() { 
    second = second -1; 
    if(minute == 0 && second == 0){ 
     clearInterval(clock) 
    } 


     //If the seconds are less than 10, add a 0 
     if(second < 10){ 
     console.log("0"+minute+":0"+second+""); 
     }else{ 
     //Normal 
     console.log("0"+minute+":"+second+""); 

     } 

     this.text = second; 
     this.myTimer1.myTimer2.text = second 


}, 1000); 

jedoch während der Countdown Arbeit und Funktionen wie erwartet ich die Fehlermeldung immer wieder bekommen myTimer2 ist nicht definiert. Ich habe wirklich Mühe, darauf eine Antwort zu finden. myTimer1 ist der Instanzname eines Movieclips myTimer2 ist der Instanzname eines dynamischen Textfelds innerhalb des Movieclips

Jede Hilfe wäre willkommen.

Dank

Answer 1

Wenn Sie diesen Fehler sehen: Cannot read property 'myTimer2' of undefined, dann ist dies nur ein Umfang Thema.

Wenn Sie eine Funktion als Argument an setInterval übergeben, wird es im globalen Gültigkeitsbereich aufgerufen. Alle im selben Bereich definierten Variablen (Sekunde, Minute usw.) sind weiterhin verfügbar, aber this wird global.

Es gibt ein paar Möglichkeiten, um den Funktionsumfang zu beheben:

---

Eine gemeinsame (und einfach) Abhilfe ist nur ein Alias ​​this im lokalen Bereich zu definieren. Die Funktion wird weiterhin im globalen Gültigkeitsbereich aufgerufen, Sie haben jedoch einen Verweis auf den Bereich, auf den Sie verweisen möchten.

var _this = this; 
setTimeout(function() { 
    _this.doSomething(); // 
}, duration); 

Ein anderer Ansatz zu binden, ist die Methode: In der Regel werden Sie Codebeispiele mit einem _this oder that Variable sehen. Dies wird in einigen älteren Browsern nicht unterstützt (es gibt viele Polyfills dafür), aber wenn Sie CreateJS verwenden, dann ist die alte Browser-Unterstützung kein Problem.

setTimeout(function() { 
    this.doSomething(); 
}.bind(this), duration); 

Hoffe, dass hilft. Es gibt plenty of articles on scope in JavaScript, wenn Sie mehr erfahren möchten.