首页 新闻 赞助 找找看

为什么定时器不能再次调用?

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();
         });

问题:第一次点击按钮时,转盘能旋转,等停止再次点击按钮,转盘不转了,请问是不是定时器的原因?

钱钱钱啊的主页 钱钱钱啊 | 初学一级 | 园豆:101
提问于:2017-04-12 11:11
< >
分享
最佳答案
0

你要把 setInterval(draw,50) 放进 start里面,

第一次执行了runLottey($("#lotteryCvs")[0]); 定时器存在没问题;

再点击定时器已经不存在了

收获园豆:100
Yu | 专家六级 |园豆:12980 | 2017-04-13 08:48

但是我把定时器放在里面的时候他就不会停止了,第一个定时器执行完,第二个定时器一直执行,请问一下具体怎么改才好?

钱钱钱啊 | 园豆:101 (初学一级) | 2017-04-13 10:05

@钱钱钱啊: 主要是变量作业域问题

Yu | 园豆:12980 (专家六级) | 2017-04-13 12:45

<!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>

Yu | 园豆:12980 (专家六级) | 2017-04-13 12:58
其他回答(1)
0

控制台报什么错误了没?

我看你的start方法写了两个,这样怕是会出问题

刘宏玺 | 园豆:14020 (专家六级) | 2017-04-12 11:28

没有-.-

支持(0) 反对(0) 钱钱钱啊 | 园豆:101 (初学一级) | 2017-04-12 17:14
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册