partial interface Window {
  long requestAnimationFrame(FrameRequestCallback callback);
  void cancelAnimationFrame(long handle);
};

var list = {};

var browsingContexts = 浏览器顶级上下文及其下属的浏览器上下文;

for (var browsingContext in browsingContexts) {
/*!将时间值从 DOMTimeStamp 更改为 DOMHighResTimeStamp 是 W3C 针对基于脚本动画计时控制规范的最新编辑草案中的最新更改，并且某些供应商仍将其作为 DOMTimeStamp 实现。较早版本的 W3C 规范使用 DOMTimeStamp，允许你将 Date.now 用于当前时间。
如上所述，某些浏览器供应商可能仍实现 DOMTimeStamp 参数，或者尚未实现 window.performance.now 计时函数。因此需要用户进行polyfill
*/
    //var time = 从1970年1月1日到当前所经过的毫秒数;
    var time = DOMHighResTimeStamp   //从页面导航开始时测量的高精确度时间。DOMHighResTimeStamp 以毫秒为单位，精确到千分之一毫秒。此时间值不直接与 Date.now() 进行比较，后者测量自 1970 年 1 月 1 日至今以毫秒为单位的时间。如果你希望将 time 参数与当前时间进行比较，请使用当前时间的 window.performance.now。



   var d = browsingContext的active document;   //即当前浏览器上下文中的Document节点
    //如果该active document可见
    if (d.hidden !== true) { 
        //拷贝active document的动画帧请求回调函数列表到list中，并清空该列表
        var doclist = d的动画帧请求回调函数列表
        doclist.appendTo(list);
        clear(doclist);
    }

    //遍历动画帧请求回调函数列表的元组中的回调函数
    for (var callback in list) {
        if (callback.cancelled !== true) {
            try {
                //每个browsingContext都有一个对应的WindowProxy对象，WindowProxy对象会将callback指向active document关联的window对象。
                //传入时间值time
                callback.call(window, time);
            }
            //忽略异常
            catch (e) {    
            }
        }
    }
}

    var id = null;

    function a(time) {
        console.log("animation");
        window.cancelAnimationFrame(id);    //不起作用
        id = window.requestAnimationFrame(a);
    }

    a();

    var id = null;

    function a(time) {
        console.log("animation");
        id = window.requestAnimationFrame(a);
        window.cancelAnimationFrame(id);
    }

    a();

    function a(time) {
        console.log("animation");
        id = window.requestAnimationFrame(a);
    }

    a();
    window.cancelAnimationFrame(id);

             var id = null;
             
             function animate(time) {
                 console.log("animation");
             }

              window.requestAnimationFrame(animate);

    var id = null;

    function animate(time) {
        console.log("animation");
        window.requestAnimationFrame(animate);
    }
    animate();

    //下面代码会打印两次"animation"
    
    var id1 = null,
        id2 = null;
    function animate(time) {
        console.log("animation");
    }
    
    id1 = window.requestAnimationFrame(animate);
    id2 = window.requestAnimationFrame(animate);   //id1和id2值不同，指向列表中不同的元组，这两个元组中的callback都为同一个animate

window.requestNextAnimationFrame = (function () {
    var originalRequestAnimationFrame = undefined,
        wrapper = undefined,
        callback = undefined,
        geckoVersion = null,
        userAgent = navigator.userAgent,
        index = 0,
        self = this;

    wrapper = function (time) {
        time = performance.now();
        self.callback(time);
    };

    /*!
     bug!
     below code:
     when invoke b after 1s, will only invoke b, not invoke a!

     function a(time){
     console.log("a", time);
     webkitRequestAnimationFrame(a);
     }

     function b(time){
     console.log("b", time);
     webkitRequestAnimationFrame(b);
     }

     a();

     setTimeout(b, 1000);



     so use requestAnimationFrame priority!
     */
    if(window.requestAnimationFrame) {
        return requestAnimationFrame;
    }


    // Workaround for Chrome 10 bug where Chrome
    // does not pass the time to the animation function

    if (window.webkitRequestAnimationFrame) {
        // Define the wrapper

        // Make the switch

        originalRequestAnimationFrame = window.webkitRequestAnimationFrame;

        window.webkitRequestAnimationFrame = function (callback, element) {
            self.callback = callback;

            // Browser calls the wrapper and wrapper calls the callback

            return originalRequestAnimationFrame(wrapper, element);
        }
    }

    //修改time参数
    if (window.msRequestAnimationFrame) {
        originalRequestAnimationFrame = window.msRequestAnimationFrame;

        window.msRequestAnimationFrame = function (callback) {
            self.callback = callback;

            return originalRequestAnimationFrame(wrapper);
        }
    }

    // Workaround for Gecko 2.0, which has a bug in
    // mozRequestAnimationFrame() that restricts animations
    // to 30-40 fps.

    if (window.mozRequestAnimationFrame) {
        // Check the Gecko version. Gecko is used by browsers
        // other than Firefox. Gecko 2.0 corresponds to
        // Firefox 4.0.

        index = userAgent.indexOf(‘rv:‘);

        if (userAgent.indexOf(‘Gecko‘) != -1) {
            geckoVersion = userAgent.substr(index + 3, 3);

            if (geckoVersion === ‘2.0‘) {
                // Forces the return statement to fall through
                // to the setTimeout() function.

                window.mozRequestAnimationFrame = undefined;
            }
        }
    }

    return window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||

        function (callback, element) {
            var start,
                finish;

            window.setTimeout(function () {
                start = performance.now();
                callback(start);
                finish = performance.now();

                self.timeout = 1000 / 60 - (finish - start);

            }, self.timeout);
        };
})();


    window.cancelNextRequestAnimationFrame = window.cancelRequestAnimationFrame
        || window.webkitCancelAnimationFrame
        || window.webkitCancelRequestAnimationFrame
        || window.mozCancelRequestAnimationFrame
        || window.oCancelRequestAnimationFrame
        || window.msCancelRequestAnimationFrame
        || clearTimeout;