Question

我无法解释为什么下面的“buttonHandler”函数中的第一行不起作用，在此语句后不显示画布。然而，“startPlay”功能的第一行是相同的，这显示了画布！如果有人能从这部分代码中看到原因，请告诉我..

感谢。

我在Chrome和Firefox中尝试了相同的结果。

function buttonHandler(){
    canvas.style.display = "block";
    var menuDisplay = document.getElementById("menuDisplay");
    menuDisplay.style.display = "none";

    drawingSurface.font = readyDisplay.font;
    drawingSurface.fillStyle = readyDisplay.fillStyle;
    drawingSurface.textBaseline = readyDisplay.textBaseline;
    drawingSurface.fillText(readyDisplay.text, readyDisplay.x, readyDisplay.y);
    window.setTimeout("startPlay()", 3000);
}

function startPlay(){
    canvas.style.display = "block";
    gameOver.style.display = "none";
    balls=[];
    for(var i=0;i < sprites.length; i++){
        var thisSprite = sprites[i];
        if(thisSprite !== cup){
            removeObject(thisSprite, sprites);
        }
    }
    score = 0;
    totalSeconds = 5;
    gameState = PLAYING;
    drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
    window.setTimeout("tick()", 1000); // Start the countdown timer
    timeToBall = Math.floor(Math.random() * 250) + 50;
    update();
}

Answer 1

您可能正在页面中的window.onload事件中运行代码。

使用弦乐功能调用此类setTimeout时：

window.setTimeout("startPlay()", 3000); // just a string reference

将在全球 startPlay()对象上评估window，这意味着该范围在获得startPlay()时无法访问onload被评估为函数是window调用函数的子函数，因此setTimeout()范围内无法访问该函数。

Live example here （什么都不会发生，但请查看代码）

通过更改window.setTimeout(startPlay, 3000); // now we have an actual function reference以使用函数引用，这将起作用，因为该函数在引用时可用（子作用域可以访问父作用域的内部工作但不能反之亦然。

这里函数引用本身将被转移到超时事件回调而不是字符串引用：

{{1}}

这也适用于另一个实例（这也更安全）。

Live working example （几乎相同的代码，只是一个直接的函数参考。）

希望这有帮助！

canvas.style.display =“block”无效

1 个答案: