javascript - 连续调用 Javascript 函数

Question

目标: 我正在尝试使用 setInterval() 创建一个带有基本 Canvas 动画的稍微动态的页面。当用户第一次访问该页面时，会显示背景图像。然后 Canvas 出现在它上面，不透明度逐渐增加到完全不透明的黑色。 Canvas 变黑后，我希望白色文本出现在我的黑色 Canvas 上。

问题: Canvas 过渡和文本同时出现。

我已经研究过这个问题，这里似乎有很多解决方案。我已经在自己的代码中尝试过很多变体。一旦我有两个独立的功能。另一次我尝试调用一个函数，然后连续调用两个函数。我读了一篇关于创建函数数组，然后遍历函数的博客。这个想法很有趣，但我想知道这里是否有更简单的东西就足够了。

我在 jsfiddle 上使用它，但该网站目前不合作。所以这就是我现在所拥有的:

<div id="container">
    <a href="#" id="LftButton"><img src="imageFiles/arrowButtonLft.png" /></a>
    <a href="#" id="RtButton"><img src="imageFiles/arrowButtonRt.png" /></a>
    <div id="canvasWrapper">
        <canvas id="myCanvas" width="675" height="600">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
        <script src="aboutMeScript.js" type="text/javascript"></script>
    </div>
</div>

#myCanvas{
width:675px;
height:600px;
float:left;
}
#canvasWrapper{
width:675px;
height:600px;
margin:auto;
}
#RtButton{
    float:right;
margin-right:34px;
}
#LftButton{
    float:left;
margin-left:34px;
}
#RtButton, #LftButton{
margin-top:200px;
}

var drawing = document.getElementById("myCanvas");
//Initialize drawing context
var ctx = drawing.getContext("2d");
//Canvas commands follow
var alphaCounter = .033;

function fadeCanvas(){
ctx.fillStyle = "rgba(0,0,0," + alphaCounter + ")";
ctx.fillRect(0,0,675,600);
alphaCounter += .03;
}
function display411(){
ctx.fillStyle=('#fff');
ctx.font='bold 14px + "Courier New, Courier, monospace" +';
ctx.fillText('Click the arrow keys forward to reveal the bigger picture.', 100,100);
}
function init(){
setInterval(fadeCanvas,100);
ctx.save();
setTimeout(display411(), 5000)
}
window.onload = init();

想法？

Answer 1

setTimeout(display411(), 5000)
window.onload = init();

当您只想传递它们时，您正在直接执行函数。去掉 ():

setTimeout(display411, 5000);
window.onload = init;