JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<button id="pause">Pause</button><button id="restart">Restart</button><br />
<div id="a">
    <h4>Asynchronous</h4>
</div>
<div id="b">
    <h4>Synchronous</h4>
</div>

CSS

#a {
    width: 8em;
    float: left;
}
#b {
    width: 8em;
    float: left;
}
#c {
    width: 8em;
    float: left;
}
p {
    margin: 0;
}

JavaScript

var Timer = function () {
    /*
        Timer (func, [func2, [func3, [ ...,]]] [delay, [iterations, [async]]])
    
        Arguments:
            func (function)
                Function to execute. If more than one are provided, they will be executed in order.
                Provide as many as you like.
           interval (integer)
                The time in milliseconds to wait before executing. Default is 1000 (1 second).
           iterations (integer)
                The number of times to run the function(s). Default is the number of functions provided
                (ie, each function is run once). false or 0 means loop indefinitely.
           async (boolean)
                Run the functions asyncronously. Setting this to true ensures that the functions will run
                according to the correct total time (making it useful for clock-like tasks) but it can
                cause "bunching" with short intervals or complex tasks. Setting it to false means the
                interval will be between the end of one function execution and the beginning of another,
                ensuring smoother intervals but with no guarantee of the total execution time. Note that
                the entire process will always be asynchronous, and this variable just determines whether
                individual function executions are asynchronous with each other. Default is true.
    */
    var args,
        functions = new Array(),
        delay,
        iterations,
        async,
        timerStart,
        timerCurrent,
        timerOffset = 0,
        pauseStart,
        proc,
        accuracy = 20, // milliseconds
        busy = false,
        i = 0,
        paused = false,
        dequeue,
        runSync,
        runAsync,
        start;
    // convert arguments object to array
    args = Array.prototype.slice.call(arguments);
    // take functions out of argument list and put them into their own list
    while (typeof(args[0]) === 'function' &&
      ...