循环调用的三种方法

Window API:
1.requestAnimationFrame(function(){}); 只有函数名
2.setTimeout(function(){},time); 可以定义时间间隔
3.setInterval(function(){},time); 可以定义时间间隔

共性：循环调用函数,后面都有一个函数；
区别： setTimeout和setInterval 可以定义时间间隔，requestAnimationFrame只有函数名，主要为了效率起见,依据电脑设备的性能来确定每次回掉的时间，可以提高效率，更加的科学.

setTimeout 和 setInterval区别

setTimeout指的是：间隔一段时间后执行，只执行一次

setInterval是指：每隔一段时间执行，重复执行代码,一直到清掉计时器停止。

requestAnimationFrame的使用

1.处理兼容

需要处理兼容,各种浏览器的适配，封装代码如下

window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
            return window.setTimeout(callback, 1000 / 60);
        };
})();

2.获取两帧的时间间隔

var lastTime = Date.now(); //上一次刷新的时间
var deltaTime; //两帧刷新的时间间隔

function gameloop(){
        window.requestAnimationFrame(gameloop);
        var now = Date.now(); //获取当前的时间
        deltaTime = now - lastTime;  //时间间隔
        console.log('deltaTime');
        lastTime = now//对于下一次刷新来说，当前时间已经变为下一次的时间
}
window.requestAnimationFrame(gameloop); //gameloop(); �两种调用都可以