javascript中实现动画是settimeout（递归）还是用setinterval好？

javascript中实现动画是setTimeout（递归）还是用setinterval好呢

之前，在研究js作用动画的东东，之前的做动画，的核心基本就是 setTimerout 和我们的 setInterval，但是现在的选择就比较多了可以使用我们的css3 还我们的html5的requestAnimationFrame。

所以，现在我来回到，做动画，setTimerout 和 setInterval 两种做法都不太好；

　requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

 

requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

　　【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量

　　【3】requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

 

下面我们就分别使用这三种方式来实现，一个进度条的功能滴呀；

requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行

 

//基本用法；
//
// 就是你每次运行的针和路程是长度一直滴呀；
function showInfo(){
   console.log("infoq");
}

var timer=requestAnimationFrame(showInfo);

cancelAnimationFrame(timer);


//这个是我们基本setInterval 时间设置；
var progressTimer;
var btn=document.getElementById("btn");
var obj=document.getElementById("fuck");
var speed=5;
btn.onclick=function (){
   clearInterval(progressTimer); //清零的时候，我们额长度也清零地呀；
   obj.style.width = '0';
   progressTimer=setInterval(function (){
          if(parseInt(obj.style.width)<500){ //直接这样做是误差的，我们在js的运中是有提高过滴呀；
          obj.style.width=parseInt(obj.style.width)+speed+'px';
          obj.innerHTML=parseInt(obj.style.width)/5+"%";
          }else{
            clearInterval(progressTimer);
          }
   },16)
}

//在来看看我们的setTimeout的做法；

var progressTimer1;
var speed=5;
var shitBtn=document.getElementById("shitBtn");
var shitObj=document.getElementById("shit");
shitBtn.onclick=function (){
      clearTimeout(progressTimer1);
      shitObj.style.width='0';
      progressTimer1=setTimeout(function fn(){
            //临界值；
            if(parseInt(shitObj.style.width)<500){
                  shitObj.style.width=parseInt(shitObj.style.width)+speed+'px';
                  shitObj.innerHTML=parseInt(shitObj.style.width)/5+"%";
                  timer = setTimeout(fn,16); //这里我们进行重复调用抵押；
            }else{
              clearTimeout(progressTimer1) 
            }

      },16)

}


//然后

var timer;
var speed=5;
var gangBtn=document.getElementById("gangBtn");
var gangObj=document.getElementById("gang");
gangBtn.onclick = function(){
    gangObj.style.width = '0';
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        if(parseInt(gangObj.style.width) < 500){
            gangObj.style.width = parseInt(gangObj.style.width) + 5 + 'px';
            gangObj.innerHTML =     parseInt(gangObj.style.width)/5 + '%';
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}


// 后面，我们要通过面向对象的方式，来进行改造滴啊；

 

 

结果图：

 

 

这里再给出JavaScript 高性能编程中的一些关于js动画的性能优化的建议，效果还是挺好的；

 

 

 

 

 

 

 

 

这里再提供一个链接，关于js动画运算的：

https://segmentfault.com/a/1190000002416071

转载于:https://www.cnblogs.com/mc67/p/5239592.html