Question

我的代码有问题，我有一个setinterval循环，检查变量menuScreen == true是否有，然后创建一个名为gameMenu1的新对象（或原型）并将其自身设置为再次假。

在循环中，这是一个试图调用gameMenu1.Draw();函数的try和catch语句。

当我将menuScreen设置为= true时，它将运行此绘制功能一次，然后再运行它，我不知道为什么。

Javascript代码：

//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元素：

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

Answer 1

由于您将menuscreen设置为false，代码将不会再次运行。

下一次间隔工作时，它不会进入if条件来定义gameMenu1，因此它无法访问它。

它也不会给出错误，因为它在try块中。基本上gameMenu1是undefined

Javascript interval有回调函数作为参数，每次传递一个带有新socpe的函数。它不保留以前功能的范围。

了解更多here

同时检查setInterval here的polyfill以了解如何实现setinterval。

Answer 2

多数民众赞成，

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);

javascript类只调用一次函数

2 个答案: