setInterval函数的用法

我是想用canvas实现一个进度条，用到这个定时器setInterval，但是调用的函数只执行了一次。

定义：

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval()被调用或窗口被关闭。

用法：

setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)

也就是说，setInterval的参数，可以是一段代码，也可以是一个函数。

菜鸟教程中的例子：

1、调用一个已命名函数：

var myVar;
 
function myFunction() {
    myVar = setInterval(alertFunc, 3000);
}
 
function alertFunc() {
    alert("Hello!");
}

2、调用一个匿名函数：

var myVar;
 
function myStartFunction() {
    myVar = setInterval(function(){ alertFunc("Runoob", "Google"); }, 2000);
}

3、调用一个带参数的函数：

setInterval(function, milliseconds, param1, param2, ...)

特别注意： IE9 及更早版本不支持

var myVar;

function myStartFunction() {
    myVar = setInterval(alertFunc, 2000, "Runoob", "Google");
}

function alertFunc(param1, param2) {
    document.getElementById("demo").innerHTML += "Hello ";

    document.getElementById("demo2").innerHTML = "传递给 alertFunc() 的参数: <br>" 
    + param1 + "<br>" + param2 + "<br>";
}

function myStopFunction() {
    clearInterval(myVar);
}

我的实现：

    function drawOnce(ctx){
        if(percent==100){
            //percent=0;//或者到100之后从零开始
            clearInterval(myProcess);//进度条到100后停止
        }
        else{
            percent++;
        }
        
        //alert(percent);
        ctx.clearRect(x,y,canvasWidth,canvasHeight);
        drawPro(ctx);
        
        fillPro(ctx,percent);
        showText(ctx,percent);
    }

   function myCanvas(){
        var c=document.getElementById("process");
        var ctx=c.getContext("2d");
        myProcess=setInterval(drawOnce(ctx),100); 
    }

 

也就是说，我在调用函数时，用的是

setInterval(方法名(),100); 

那么，调用drawOnce()和调用drawOnce有什么区别呢？

调用drawOnce()是函数本身传给setInterval，他就会每隔100毫秒执行一次 这个函数你把函数本身传给setInterval，他就会每隔100毫秒执行一次 这个函数而加了括号以后，函数直接就运行了，所以你把move()运行后的值传给了setInterval,函数move又没有返回值，那setInterval每100毫秒执行一次“空”，所以啥都没干

参考：http://www.runoob.com/jsref/met-win-setinterval.html