为什么定时器不能再次调用？
0
悬赏园豆：100
[已解决问题]
解决于 2017-04-13 14:54
function runLottey(Elem){ // 1. 获取画布对象 var context = Elem.getContext('2d'); // 2. 获取画布的宽度和高度 const WIDTH = Elem.width; const HEIGHT = Elem.height; // 3. 将抽奖图片加载 var as = new Image(); as.src = "img/as.png";// 相对于index.html页面 var pin = new Image(); pin.src = "img/pin.png"; // 4. 平移整个画布 context.translate(WIDTH/2,HEIGHT/2); // 5. 动态绘制 var loop = setInterval(draw,50); // 6. 初始化旋转的角度值 - 生成随机数（0 - 360） var pie = Math.random()*(Math.PI*2); // 7. 定义每次旋转增加的角度值 var addPie = 0; // 8. 定义每次旋转差值 var add = Math.PI/180; // 8. 定义开始旋转的时间 var startTime; // 8. 定义专门用于绘制图片的函数 function draw(){ // 旋转后，每次增加的角度值+addPie if(addPie == 0){ addPie += addPie; }else{ addPie += add; } // 旋转并绘制转盘图片 context.rotate(pie + addPie); myDraw(as,-as.width/2,-as.height/2); // 旋转并绘制指针图片 context.rotate(-(pie + addPie)); myDraw(pin,-pin.width/2+10,-pin.height/2-10); // 获取当前的时间 var endTime = new Date().getTime(); // 判断如果执行了10秒，执行旋转 if((endTime-startTime) <= 5000){ // 加速旋转 add += Math.PI/360; }else if((endTime-startTime) > 5000 && (endTime-startTime) < 10000){ // 减速旋转 add -= Math.PI/360; }else if((endTime-startTime) >= 10000){ clearInterval(loop); loop=null; $("#btnLottery").removeAttr("disabled"); } } function start(){ addPie = Math.PI/180; startTime = new Date().getTime(); // 将按钮变为不可操作 $("#btnLottery").attr("disabled","disabled"); } // 通用的绘制图片的方法 function myDraw(img,x,y){ context.drawImage(img,x,y); } return start; }
//HTML的代码 var start = runLottey($("#lotteryCvs")[0]); $("#btnLottery").click(function(){ start(); });
问题：第一次点击按钮时，转盘能旋转，等停止再次点击按钮，转盘不转了，请问是不是定时器的原因？
最佳答案
0
你要把 setInterval(draw,50) 放进 start里面，
第一次执行了runLottey($("#lotteryCvs")[0]); 定时器存在没问题；
再点击定时器已经不存在了
收获园豆：100
但是我把定时器放在里面的时候他就不会停止了，第一个定时器执行完，第二个定时器一直执行，请问一下具体怎么改才好？
@钱钱钱啊: 主要是变量作业域问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body >
<input type="button" id="btnLottery" value="Start" />
<script>
function runLottey(){
// 7. 定义每次旋转增加的角度值
this.addPie = 0;
// 8. 定义每次旋转差值
this.add = 5;
// 8. 定义开始旋转的时间
this.startTime=new Date().getTime();;
this.endTime = new Date().getTime();
// 8. 定义专门用于绘制图片的函数
function draw(){
// 旋转后，每次增加的角度值+addPie
if(addPie == 0){
addPie += 1;
}else{
addPie += add;
}
console.debug(addPie);
// 获取当前的时间
endTime = new Date().getTime();
// 判断如果执行了10秒，执行旋转
if((endTime-startTime) <= 5000){
// 加速旋转
console.debug("+5");
add += 5;
}else if((endTime-startTime) > 5000 && (endTime-startTime) < 10000){
// 减速旋转
console.debug("-5");
add -= 5;
}else if((endTime-startTime) >= 10000){
clearInterval(loop);
loop=null;
console.debug("done");
$("#btnLottery").removeAttr("disabled");
}
}
function start(){
this.addPie = 0;
this.startTime = new Date().getTime();
this.loop = setInterval(draw,1000);
// 将按钮变为不可操作
$("#btnLottery").attr("disabled","disabled");
}
return start;
}
var start = runLottey();
$("#btnLottery").click(function(){
start();
});
start();
</script>
</body>
</html>
其他回答(1)
0
控制台报什么错误了没？
我看你的start方法写了两个，这样怕是会出问题
没有-.-
