setInterval函数的用法
我是想用canvas实现一个进度条,用到这个定时器setInterval,但是调用的函数只执行了一次。定义:setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval()被调用或窗口被关闭。用法:setInterval(code, milliseconds);set
·
我是想用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
更多推荐
已为社区贡献1条内容
所有评论(0)