我是想用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
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐