window.cancelAnimationFrame使用犯法

在學(xué)習(xí)requestAnimFrame的時(shí)候，想要使用 window.cancelAnimationFrame停止動(dòng)畫，但是不知怎樣是正確的使用方法，一直無法停止
代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     #requestAnim{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: #ccc;
     }
     #aaa{
        position: absolute;
        top: 100px;
     }
    </style>

</head>
<body>
    <div id="requestAnim">
      點(diǎn)擊運(yùn)行
    </div>
    <button id="aaa" onclick="restop();">點(diǎn)擊停止</button>
        <script>
   
(function() {
 var lastTime = 0;
 var vendors = ['ms', 'moz', 'webkit', 'o'];
 for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
  window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
 }
 
 if (!window.requestAnimationFrame)
  window.requestAnimationFrame = function(callback, element) {
   var currTime = new Date().getTime();
   var timeToCall = Math.max(0, 16 - (currTime - lastTime));
   var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
    timeToCall);
   lastTime = currTime + timeToCall;
   return id;
  };
 
 if (!window.cancelAnimationFrame)
  window.cancelAnimationFrame = function(id) {
   clearTimeout(id);
  };
}()); 
   window.requestAnimFrame = (function(){//兼容瀏覽器
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              window.oRequestAnimationFrame      ||
              window.msRequestAnimationFrame     ||
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
    window.cancelRequestAnimFrame = ( function() {
 return window.cancelAnimationFrame ||
  window.webkitCancelRequestAnimationFrame ||
  window.mozCancelRequestAnimationFrame ||
  window.oCancelRequestAnimationFrame ||
  window.msCancelRequestAnimationFrame ||
  clearTimeout;
} )();
var elem = document.getElementById("requestAnim");
var startTime = undefined;//全局的
function render(time){//time是局部的
  if (time === undefined)
    time = Date.now();//獲取到當(dāng)前時(shí)間的毫秒數(shù)
  if (startTime === undefined)
     //第一次調(diào)用的時(shí)候startTime是undefined，之后就不是了
     //而time每次調(diào)用都等于當(dāng)前時(shí)間的毫秒數(shù)
    startTime = time;
    //當(dāng)是500的整數(shù)倍的時(shí)候，left值從0開始
  elem.style.left = ((time - startTime)/10%500) + "px";
}
elem.onclick = function(){
    (function animloop(){
      render();
      //這里利用requestAnimFrame方法來控制渲染的幀數(shù)
      requestAnimFrame(animloop);
    })();
}
function restop(){
    window.cancelAnimationFrame(animloop);
}
    </script>
</body>
</html>

回答

編輯回答

冷咖啡

var aid 
elem.onclick = function(){
    (function animloop(){
      render();
      //這里利用requestAnimFrame方法來控制渲染的幀數(shù)
      aid = requestAnimFrame(animloop);
    })();
}
function restop(){
    window.cancelAnimationFrame(aid);
}

2017年11月23日 20:18