用于画布计时器的settimeout调用函数

时间:2013-10-13 21:37:40

标签: javascript html5 canvas settimeout

我写了这段代码,我对setTimeout调用函数有问题,因为延迟
这是一个计时器,但setTimeout每秒都不起作用 为什么呢?

<head>
<script>
function timer(sec) {
    var c = document.getElementById("arcTimer");
    var ctx = c.getContext("2d");
    ctx.clearRect(0,0,200,200);
    ctx.lineWidth = 20;
    ctx.strokeStyle = "#0066CC";
    ctx.beginPath();
    ctx.arc(100,100,75,-0.5*Math.PI,sec*Math.PI);
    ctx.stroke();
    if ( sec >= 1.5 ) {
        sec = -0.5;
    }
    setTimeout(timer(sec+0.03),1000);
}
</script>
</head>
<body onLoad="timer(-0.5);">

<canvas width="200" height="200" id="arcTimer" ></canvas>

</body>

由于

2 个答案:

答案 0 :(得分:1)

代码

setTimeout(timer(sec+0.03),1000);

... 调用 timer函数并将其返回值传递到setTimeout,与foo(bar()) 调用 bar的方式完全相同并将其返回值传递给foo。由于您的timer函数(隐式)返回undefined,而setTimeout在您通过undefined时没有执行任何操作,因此会立即调用timer和然后什么都不做。

如果您想安排以timer作为参数调用sec+0.03,请创建一个执行此操作的函数:

setTimeout(function() {
    timer(sec+0.03);
}, 1000);

答案 1 :(得分:0)

此行错误:setTimeout(timer(sec + 0.03),1000); 第一个参数是未定义的,而不是函数。