JavaScript Klasse nur Aufruf Funktion einmal

Question

Ich habe ein Problem mit meinem Code, in dem ich eine setinterval Schleife, die überprüft, ob eine Variable menuScreen == true wenn es dann ein neues Objekt (oder Prototyp) namens gameMenu1 erstellt und setzt sich wieder auf false .

Unter dieser in der Schleife ist eine Versuchs- und Fang-Anweisung, die versucht, die gameMenu1.Draw(); Funktion aufzurufen.

Wenn ich menuScreen auf = true setze, wird es diese Zeichenfunktion einmal ausführen und dann einfach nicht mehr ausführen und ich habe keine Ahnung warum.

Javascript-Code:

//defining the canvas elements (initial setup) 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var canvasWidth = canvas.width; 
var canvasHeight = canvas.height; 

//setting the menuScreen to true 
var menuScreen = true; 
var gameScreen = false; 


//gamemenu class 
var GameMenu = function() { 
    // inserting a texture from files 
    this.img = new Image(); 
    this.img.src = "Assets/textures/TitleScreen.png"; 
}; 

GameMenu.prototype.Draw = function() { 
    console.log('drawn to screen (menuscreen)') 
    ctx.drawImage(this.img,0,0,canvas.width,canvas.height); 
}; 

setInterval(function() { 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.strokeRect(0,0,canvasWidth,canvasHeight); 
    console.log(menuScreen) 
    if (menuScreen == true) { 
     var gameMenu1 = new GameMenu(); 
     menuScreen = false; 
    } 
    try { 
     gameMenu1.Draw(); 
    } 
    catch(err) { 

    } 

}, 30); 

Cavas Element:

<canvas id="canvas" width="600" height="600"></canvas>

Answer 1

Das ist es,

setInterval(function() { 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.strokeRect(0,0,canvasWidth,canvasHeight); 
    console.log(menuScreen) 
    var gameMenu1; 

    if (menuScreen == true) { 
     gameMenu1 = new GameMenu(); 
     menuScreen = false; 
    } 

    try { 
     gameMenu1.Draw(); 
    } catch(err) { 

    } 

}, 30); 

Answer 2

Der Code wird nicht erneut ausgeführt, weil Sie menuscreen auf false gesetzt.

Das nächste Mal, wenn das Intervall funktioniert, wird es nicht in die if-Bedingung gehen, um gameMenu1 zu definieren, und so hat es keinen Zugriff darauf.

Es wird auch keinen Fehler geben, weil es in einem try-Block ist. Grundsätzlich gameMenu1 ist undefined

Javascript Intervall Callback-Funktion als Parameter und jedes Mal, wenn eine Funktion mit frischen socpe wird an sie übergeben hat. Es behält den Bereich nicht von der vorherigen Funktion bei.

mehr here

Auch here zu verstehen überprüfen polyfill von setInterval Lesen Sie, wie SetInterval umgesetzt wird.