JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

JavaScript

// Force my shim for testing
requestAnimationFrame = webkitRequestAnimationFrame = null;

(function (global) {
    var now = performance.now
              ? performance.now.bind(performance)
              : Date.now
                ? Date.now.bind(Date)
                : function(){ return +(new Date()); };

    var pendingCallbacks = [];
    var pendingHandles = {};
    var previousCallbacks;
    var previousHandles;
    var frameTimer = null;
    var lastFrameTime = 0;

    function reset_data () {
        previousCallbacks = pendingCallbacks;
        previousHandles = pendingHandles;
        pendingCallbacks = [];
        pendingHandles = {};
        frameTimer = null;
    }

    function object_keys (obj) { 
        var keys = [];
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                keys.push(key);
            }
        }
        return keys;
    }

    function generate_handle (currentHandles) {
        var handles = object_keys(currentHandles);
        var newHandle;
        do {
            newHandle = Math.round(Math.random() * 4294967296);
        } while (handles.indexOf(newHandle) !== -1);
        
        return newHandle;
    }

    function process_frame () {
        var handle;
        reset_data();
        lastFrameTime = now();

        while (handle = previousCallbacks.shift()) {
            handle(lastFrameTime);
        }
    }

    function rAF_shim (fn) {
        if (typeof fn === 'function') {
            if (!frameTimer) {
                var delay = Math.max(0, (lastFrameTime + 16) - now()); 
                frameTimer = setTimeout(process_frame, delay);
            }
            var handle = generate_handle(pendingHandles);
            pendingHandles[handle] = fn;
            pendingCallbacks.push(fn);
            return handle;
        }
        throw new TypeError("Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function.");
    }

    function...