setTimeout setInterval requestAnimationFrame 三者之间的

2019独角兽企业重金招聘Python工程师标准>>>

由于在这段时间里,要完成一些原生的动画插件,所以就在网上找一些关于setTimeout setInterval requestAnimationFrame这三种方法的用例,完事之后就来比较一下这三者之间的区别

首先我们来看setTimeout这个方法,

setTimeout(function(){
    //do something
},1000);

那么这个方法的意思呢就是在1S之后执行回调函数function里面的事情,当然是很好理解啦,那么如果我们要用setTimeout来执行一个类似时钟的功能咋办呢看下面

var step = (function (){
    setTimeout(function(){
         //do something
         step();
    },1000);
})();

那么就会有朋友问,我直接用setInterval方法不就是定时执行了嘛,为什么一定要写的这么复杂嘞....

OK,我们来看一下setInterval

setInterval(function(){
    //do something
},1000);

那么这个方法看上去也是简单明了,看起来实现的就是setTimeout循环执行的功能,那么他们之间到底有什么区别呢?

其实区别也是很明显的,也是浏览器最大的不同点,就是异步问题,

setTimeout这个方法的意思是在1000ms之后再执行do something,记住!!!!一定是在这个1000ms定时结束之后,它才会执行的,而且执行了之后就完事儿了,其他他不管了

但是setInterval却不一定,它可能会出现两种情况:

1. 时间间隔或许跳过.

2. 时间间隔可能小于定时调用代码的时间
   

那这两种情况是啥意思呢,具体我们来看一下西面这张图....(我在网上找了好久的,5555555/(ㄒoㄒ)/~~)

这个图的意思是加入我的setInterval事件是绑定在一个click上的,那么在点击元素之后,执行时间的时间问题,这样就可能会有时间先后的问题了,

好吧有了这张图,我想应该更容易理解了吧,,,,,,,,

那么我们最后来说一下requestAnimationFrame这个方法,这个方法是干哈用滴嘞,,,,,

其实这是为了做动画专用的一个方法,这个方法会告诉浏览器,我要执行的这个步骤是一个动画,

那么大家都知道,执行动画是需要占用CPU和GPU的,那么这个方法就会告诉浏览器这是一个动画,从而占用较少的CPU和GPU了

具体我们来看一下是怎么用的,,,,(这里我们就来简单地实现一个淡出的小方法)

var fadeOut = function(dom){
    //此处初始化节点属性
    dom.style.opacity = 1;
    dom.style.display = 'block';
    //这是一个淡出的步骤
    //在这个方法中我们用requestAnimationFrame来反复调用此函数,来执行动画
    var fade = (function(){
        var val = parseFloat(dom.style.opacity);
        if ((val -=.1)<0){
            dom.style.display = 'none';
        }else{
            dom.style.opacity = val;
            requsetAnimationFrame(fade);
        }
    })();
};

但是这种方法对于dom节点的操作会比较频繁.所以如果是要在设备上原生动画的话,不推荐使用哦.....

OK,现在对于这三个方法是不是了解了更多了呢?

转载于:https://my.oschina.net/codingBingo/blog/639772