知識點------深入理解定時器系列

與setTimeout和setInterval不同，requestAnimationFrame不需要設置時間間隔。

使用setInterval、setTimeout和requestAnimationFrame這三個方法制作一個簡單的進制度效果

使用setInterval定時器來實現進度條的功能

將以下代碼放入body標籤中間節課即可

  <div id="myDiv" style="font-famil:;background-color: rgb(15, 236, 100);text-align:right;width: 0;height: 20px;line-height: 20px;">0%</div>
  <button id="btn">run</button>
  <script>
    var timer;
    btn.onclick = function () {
      clearInterval(timer);
      myDiv.style.width = '0';
      timer = setInterval(function () {
        if (parseInt(myDiv.style.width) < 500) { // 這裏舉例進度條寬度爲500px
          myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px'; // 這裏是每次加的盒子寬度，適當即可.
          myDiv.innerHTML = parseInt(myDiv.style.width) / 5 + '%';  // 這裏除以的數值 是結果爲100的值；這樣最終纔會到100%進度
        } else {
          clearInterval(timer);
        }
      }, 16.67);
    }
  </script>

使用setTimeout定時器來實現進度條的功能

將以下代碼放入body標籤中間節課即可

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
   clearTimeout(timer);
   myDiv.style.width = '0';
   timer = setTimeout(function fn(){
       if(parseInt(myDiv.style.width) < 500){
           myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
           myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';
           timer = setTimeout(fn,16);
       }else{
           clearTimeout(timer);
       }    
   },16);
}
</script>

使用requestAnimationFrame定時器來實現進度條的功能

將以下代碼放入body標籤中間節課即可
requestAnimationFrame採用系統時間間隔，保持最佳繪製效率，不會因爲間隔時間過短，造成過度繪製，增加開銷；也不會因爲間隔時間太長，使用動畫卡頓不流暢，讓各種網頁動畫效果能夠有一個統一的刷新機制，從而節省系統資源，提高系統性能，改善視覺效果
　requestAnimationFrame的用法與settimeout很相似，只是不需要設置時間間隔而已。requestAnimationFrame使用一個回調函數作爲參數，這個回調函數會在瀏覽器重繪之前調用。它返回一個整數，表示定時器的編號，這個值可以傳遞給cancelAnimationFrame用於取消這個函數的執行

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
   myDiv.style.width = '0';
   cancelAnimationFrame(timer);
   timer = requestAnimationFrame(function fn(){
       if(parseInt(myDiv.style.width) < 500){
           myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
           myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';
           timer = requestAnimationFrame(fn);
       }else{
           cancelAnimationFrame(timer);
       }    
   });
}
</script>