Request Animation Frame Queue

raf-queue.js

/**
 * Using:
 * var queue = new RafAnimationQueue(defaultContext)
 * queue.add(firstAnimationFrameCallback) // firstAnimationFrameCallback will executed with defaultContext
 * queue.add(secondAnimationFrameCallback, customContext)
 * queue.delay() // skip just one frame
 * queue.clear() // clear animation queue
**/
window.RafAnimationQueue = (function () {
    function RafAnimationQueue(context) {
        this.context = context || undefined

        this.clear()
    }

    RafAnimationQueue.prototype.add = function (callback, context) {
        if (callback instanceof Function) {
            this.queue.push(callback.bind(context || this.context))

            this.runQueue()
        }

        return this
    }

    RafAnimationQueue.prototype.delay = function () {
        this.queue.push(undefined)

        this.runQueue()

        return this
    }

    RafAnimationQueue.prototype.runQueue = function () {
        if (this.queueInProgress) {
            return
        }

        this.queueInProgress = true

        requestAnimationFrame(this.queueLoop.bind(this))
    }

    RafAnimationQueue.prototype.queueLoop = function () {
        var callback = this.queue.shift()

        callback instanceof Function && callback()

        if (!this.queue.length) {
            this.queueInProgress = false
        }
        else {
            requestAnimationFrame(this.queueLoop.bind(this))
        }
    }

    RafAnimationQueue.prototype.clear = function () {
        this.queue = []
    }

    return RafAnimationQueue
})()