求解，这2种简单动画写法哪种效率更高，求简单说明原因

<body>
  <input type="button" id="btn" value="动画 800">
  <input type="button" id="btn1" value="动画 400">  <div id="box">
  </div>
  <div id="box1">
  </div>
  <script>
    var btn = document.getElementById('btn');
    var btn1 = document.getElementById('btn1');    var box = document.getElementById('box');
    var box1 = document.getElementById('box1');    btn.onclick = function () {
      animate(box, 800);
      animate(box1, 800);
    }    btn1.onclick = function () { 
      animate(box, 400);
      animate(box1, 400);
    }    function animate(element, target) {
      if (element.timerId) {
        clearInterval(element.timerId);
        timerId = null;
      }      element.timerId = setInterval(function () {
 
        var step = 10;
 
        var current = element.offsetLeft;        if (current >= target) {          clearInterval(element.timerId);          element.style.left = target + 'px';
          return;
        }
        current += step;
        element.style.left = current + 'px';
      }, 30);
    }
  </script>
</body>
---------------------------------
var btn1 = document.getElementById('btn1');
      var btn2 = document.getElementById('btn2');
      var box1 = document.getElementById('box1');
      var box2 = document.getElementById('box2');      btn1.onclick = function(){
           animate(box1,200);
      }      btn2.onclick = function(){
           animate(box2,300);
      }      function animate(element,traget) {
         if (element.timeId) {
            clearInterval(element.timeId);
            timdId = null;
         }         element.timeId = setInterval(fn,30);
         var current = element.offsetLeft;
         
         function fn(){
            var speed = 10;
            current = current > traget ? current : current+=speed;
            element.style.left = current + 'px';
         }
      }