2017-04-18
写了个随机抽奖的小案例，打算随机跳动十次，每次变化的时间越来越长，也就是跳动的速度越来越慢，结果发现setInterval的时间参数并不会随着变化。
<!--案例的结构如下-->
<body>
<button id="btn">开始抽奖</button>
<ul>
<li>一等奖</li>
<li>二等奖</li>
<li>三等奖</li>
<li>四等奖</li>
<li>五等奖</li>
<li>六等奖</li>
<li>七等奖</li>
<li>八等奖</li>
<li>九等奖</li>
</ul>
<!--简单的JavaScript代码如下-->
<script>
$(function () {
var oBtn = $('#btn');
var timer = null;
var oLi = $('li');
//点击按钮开始执行定时器
oBtn.click(function () {
clearInterval(timer);
var time = 10;
var speed = 100;
timer = setInterval(function () {
time--;
speed+=30;
//console.log(speed);
var index = Math.floor(Math.random()*oLi.length);
oLi.css('background','none');
oLi.eq(index).css('background','red');
if (time==0){
clearInterval(timer);
}
},speed)
})
})
</script>
后来想想改成setTimeOut(),然后加上回调，这样时间参数speed就能够每次获取到新的数值。script的代码修改为如下：
<!--简单的JavaScript代码如下-->
<script>
$(function () {
var oBtn = $('#btn');
var timer = null;
var oLi = $('li');
//点击按钮开始执行定时器
oBtn.click(function () {
var time = 10;
var speed = 100;
timer = setTimeout(function () {
time--;
speed+=30;
console.log(speed);
var index = Math.floor(Math.random()*oLi.length);
oLi.css('background','none');
oLi.eq(index).css('background','red');
if (time){//time等于0就不再回调
timer = setTimeout(arguments.callee,speed);
}
},speed)
})
})
效果如下：
