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