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 })
效果如下：
