setInterval()的时间参数无法随参数的变化而变化

2017-04-18

写了个随机抽奖的小案例,打算随机跳动十次,每次变化的时间越来越长,也就是跳动的速度越来越慢,结果发现setInterval的时间参数并不会随着变化。

 1 <!--案例的结构如下-->
 2 <body>
 3 <button id="btn">开始抽奖</button>
 4 <ul>
 5     <li>一等奖</li>
 6     <li>二等奖</li>
 7     <li>三等奖</li>
 8     <li>四等奖</li>
 9     <li>五等奖</li>
10     <li>六等奖</li>
11     <li>七等奖</li>
12     <li>八等奖</li>
13     <li>九等奖</li>
14 </ul>
15 <!--简单的JavaScript代码如下-->
16 <script>
17     $(function () {
18         var oBtn = $('#btn');
19         var timer = null;
20     var oLi = $('li');
21     //点击按钮开始执行定时器
22     oBtn.click(function () {
23         clearInterval(timer);
24         var time = 10;
25         var speed = 100;
26         timer = setInterval(function () {
27             time--;
28             speed+=30;
29             //console.log(speed);
30             var index = Math.floor(Math.random()*oLi.length);
31             oLi.css('background','none');
32             oLi.eq(index).css('background','red');
33             if (time==0){
34                 clearInterval(timer);
35             }
36         },speed)
37     })
38     })
39 </script>

后来想想改成setTimeOut(),然后加上回调,这样时间参数speed就能够每次获取到新的数值。script的代码修改为如下:

 1 <!--简单的JavaScript代码如下-->
 2 <script>
 3     $(function () {
 4         var oBtn = $('#btn');
 5         var timer = null;
 6         var oLi = $('li');
 7 //点击按钮开始执行定时器
 8         oBtn.click(function () {
 9             var time = 10;
10             var speed = 100;
11             timer = setTimeout(function () {
12                 time--;
13                 speed+=30;
14                 console.log(speed);
15                 var index = Math.floor(Math.random()*oLi.length);
16                 oLi.css('background','none');
17                 oLi.eq(index).css('background','red');
18                 if (time){//time等于0就不再回调
19                     timer = setTimeout(arguments.callee,speed);
20                 }
21             },speed)
22         })
23     })

 

效果如下:

 

posted @ 2017-04-18 20:11  马玲俊  阅读(2342)  评论(0编辑  收藏  举报