Skip to content

Instantly share code, notes, and snippets.

@joyrexus

joyrexus/README.md

Forked from joelambert/README
Last active July 12, 2024 23:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joyrexus/7304146 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joyrexus/7304146 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joyrexus revised this gist Nov 4, 2013. 4 changed files with 18 additions and 19 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    Drop in replace functions for `setTimeout` and `setInterval` that make use of `requestAnimationFrame`.

    See [overview article](http://creativejs.com/resources/requestanimationframe/).
    See [overview article](http://creativejs.com/resources/requestanimationframe/) and Paul Irish's [earlier post](http://paulirish.com/2011/requestanimationframe-for-smart-animating).

    Courtesty of [Joe Lambert](http://www.joelambert.co.uk)

    15 changes: 7 additions & 8 deletions requestAnimFrame.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,11 @@
    // requestAnimationFrame() shim by Paul Irish
    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(/* function */ callback, /* DOMElement */ element){
    window.setTimeout(callback, 1000 / 60);
    };
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(/* function */ callback, /* DOMElement */ element){
    window.setTimeout(callback, 1000 / 60);
    };
    })();
    10 changes: 5 additions & 5 deletions requestInterval.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,11 +5,11 @@
    */
    window.requestInterval = function(fn, delay) {
    if( !window.requestAnimationFrame &&
    !window.webkitRequestAnimationFrame &&
    !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
    !window.oRequestAnimationFrame &&
    !window.msRequestAnimationFrame)
    return window.setInterval(fn, delay);
    !window.webkitRequestAnimationFrame &&
    !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
    !window.oRequestAnimationFrame &&
    !window.msRequestAnimationFrame )
    return window.setInterval(fn, delay);

    var start = new Date().getTime(),
    handle = new Object();
    10 changes: 5 additions & 5 deletions requestTimeout.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,11 +6,11 @@

    window.requestTimeout = function(fn, delay) {
    if( !window.requestAnimationFrame &&
    !window.webkitRequestAnimationFrame &&
    !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
    !window.oRequestAnimationFrame &&
    !window.msRequestAnimationFrame)
    return window.setTimeout(fn, delay);
    !window.webkitRequestAnimationFrame &&
    !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
    !window.oRequestAnimationFrame &&
    !window.msRequestAnimationFrame )
    return window.setTimeout(fn, delay);

    var start = new Date().getTime(),
    handle = new Object();
  2. joyrexus renamed this gist Nov 4, 2013. 1 changed file with 0 additions and 0 deletions.
    0 README → README.md
    View file
    File renamed without changes.
  3. joyrexus revised this gist Nov 4, 2013. 1 changed file with 11 additions and 6 deletions.
    17 changes: 11 additions & 6 deletions README
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,12 @@
    Drop in replace functions for setTimeout() & setInterval() that
    make use of requestAnimationFrame() for performance where available
    http://www.joelambert.co.uk
    Drop in replace functions for `setTimeout` and `setInterval` that make use of `requestAnimationFrame`.

    Copyright 2011, Joe Lambert.
    Free to use under the MIT license.
    http://www.opensource.org/licenses/mit-license.php
    See [overview article](http://creativejs.com/resources/requestanimationframe/).

    Courtesty of [Joe Lambert](http://www.joelambert.co.uk)

    Copyright 2011, Joe Lambert.
    Free to use under the MIT license.
    http://www.opensource.org/licenses/mit-license.php


    More info, resources, and tutorials on web animation best practices [here](https://gist.github.com/joyrexus/7156575).
  4. @joelambert joelambert revised this gist Dec 12, 2011. 2 changed files with 8 additions and 6 deletions.
    7 changes: 4 additions & 3 deletions requestInterval.js
    View file
    Original file line number Diff line number Diff line change
    @@ -34,11 +34,12 @@ window.requestInterval = function(fn, delay) {
    * Behaves the same as clearInterval except uses cancelRequestAnimationFrame() where possible for better performance
    * @param {int|object} fn The callback function
    */
    window.clearRequestInterval = function(handle) {
    window.clearRequestInterval = function(handle) {
    window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) :
    window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) :
    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
    window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
    window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
    window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
    window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) :
    clearInterval(handle);
    };
    7 changes: 4 additions & 3 deletions requestTimeout.js
    View file
    Original file line number Diff line number Diff line change
    @@ -27,14 +27,15 @@ window.requestTimeout = function(fn, delay) {
    };

    /**
    * Behaves the same as clearInterval except uses cancelRequestAnimationFrame() where possible for better performance
    * Behaves the same as clearTimeout except uses cancelRequestAnimationFrame() where possible for better performance
    * @param {int|object} fn The callback function
    */
    window.clearRequestTimeout = function(handle) {
    window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) :
    window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) :
    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
    window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
    window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
    window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
    window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) :
    clearTimeout(handle);
    };
  5. @joelambert joelambert revised this gist Jul 9, 2011. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion requestInterval.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    window.requestInterval = function(fn, delay) {
    if( !window.requestAnimationFrame &&
    !window.webkitRequestAnimationFrame &&
    !window.mozRequestAnimationFrame &&
    !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
    !window.oRequestAnimationFrame &&
    !window.msRequestAnimationFrame)
    return window.setInterval(fn, delay);
    2 changes: 1 addition & 1 deletion requestTimeout.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@
    window.requestTimeout = function(fn, delay) {
    if( !window.requestAnimationFrame &&
    !window.webkitRequestAnimationFrame &&
    !window.mozRequestAnimationFrame &&
    !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
    !window.oRequestAnimationFrame &&
    !window.msRequestAnimationFrame)
    return window.setTimeout(fn, delay);
  6. @joelambert joelambert revised this gist Jun 21, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,6 @@ Drop in replace functions for setTimeout() & setInterval() that
    make use of requestAnimationFrame() for performance where available
    http://www.joelambert.co.uk

    Copyright 2011, Joe Lambert. All rights reserved
    Copyright 2011, Joe Lambert.
    Free to use under the MIT license.
    http://www.opensource.org/licenses/mit-license.php
  7. Joe Lambert revised this gist Jun 4, 2011. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions requestTimeout.js
    View file
    Original file line number Diff line number Diff line change
    @@ -26,6 +26,10 @@ window.requestTimeout = function(fn, delay) {
    return handle;
    };

    /**
    * Behaves the same as clearInterval except uses cancelRequestAnimationFrame() where possible for better performance
    * @param {int|object} fn The callback function
    */
    window.clearRequestTimeout = function(handle) {
    window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) :
  8. Joe Lambert revised this gist Jun 4, 2011. 2 changed files with 40 additions and 8 deletions.
    26 changes: 22 additions & 4 deletions requestInterval.js
    View file
    Original file line number Diff line number Diff line change
    @@ -11,8 +11,10 @@ window.requestInterval = function(fn, delay) {
    !window.msRequestAnimationFrame)
    return window.setInterval(fn, delay);

    var start = new Date().getTime();
    (function loop() {
    var start = new Date().getTime(),
    handle = new Object();

    function loop() {
    var current = new Date().getTime(),
    delta = current - start;

    @@ -21,6 +23,22 @@ window.requestInterval = function(fn, delay) {
    start = new Date().getTime();
    }

    requestAnimFrame(loop);
    })();
    handle.value = requestAnimFrame(loop);
    };

    handle.value = requestAnimFrame(loop);
    return handle;
    }

    /**
    * Behaves the same as clearInterval except uses cancelRequestAnimationFrame() where possible for better performance
    * @param {int|object} fn The callback function
    */
    window.clearRequestInterval = function(handle) {
    window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) :
    window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
    window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
    window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
    clearInterval(handle);
    };
    22 changes: 18 additions & 4 deletions requestTimeout.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,11 +12,25 @@ window.requestTimeout = function(fn, delay) {
    !window.msRequestAnimationFrame)
    return window.setTimeout(fn, delay);

    var start = new Date().getTime();
    (function loop(){
    var start = new Date().getTime(),
    handle = new Object();

    function loop(){
    var current = new Date().getTime(),
    delta = current - start;

    delta >= delay ? fn.call() : requestAnimFrame(loop);
    })();
    delta >= delay ? fn.call() : handle.value = requestAnimFrame(loop);
    };

    handle.value = requestAnimFrame(loop);
    return handle;
    };

    window.clearRequestTimeout = function(handle) {
    window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) :
    window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
    window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
    window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
    clearTimeout(handle);
    };
  9. Joe Lambert renamed this gist Jun 1, 2011. 1 changed file with 0 additions and 0 deletions.
    0 setInterval.js → requestInterval.js
    View file
    File renamed without changes.
  10. Joe Lambert created this gist Jun 1, 2011.
    7 changes: 7 additions & 0 deletions README
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Drop in replace functions for setTimeout() & setInterval() that
    make use of requestAnimationFrame() for performance where available
    http://www.joelambert.co.uk

    Copyright 2011, Joe Lambert. All rights reserved
    Free to use under the MIT license.
    http://www.opensource.org/licenses/mit-license.php
    12 changes: 12 additions & 0 deletions requestAnimFrame.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    // requestAnimationFrame() shim by Paul Irish
    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(/* function */ callback, /* DOMElement */ element){
    window.setTimeout(callback, 1000 / 60);
    };
    })();
    22 changes: 22 additions & 0 deletions requestTimeout.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    /**
    * Behaves the same as setTimeout except uses requestAnimationFrame() where possible for better performance
    * @param {function} fn The callback function
    * @param {int} delay The delay in milliseconds
    */

    window.requestTimeout = function(fn, delay) {
    if( !window.requestAnimationFrame &&
    !window.webkitRequestAnimationFrame &&
    !window.mozRequestAnimationFrame &&
    !window.oRequestAnimationFrame &&
    !window.msRequestAnimationFrame)
    return window.setTimeout(fn, delay);

    var start = new Date().getTime();
    (function loop(){
    var current = new Date().getTime(),
    delta = current - start;

    delta >= delay ? fn.call() : requestAnimFrame(loop);
    })();
    };
    26 changes: 26 additions & 0 deletions setInterval.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    /**
    * Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance
    * @param {function} fn The callback function
    * @param {int} delay The delay in milliseconds
    */
    window.requestInterval = function(fn, delay) {
    if( !window.requestAnimationFrame &&
    !window.webkitRequestAnimationFrame &&
    !window.mozRequestAnimationFrame &&
    !window.oRequestAnimationFrame &&
    !window.msRequestAnimationFrame)
    return window.setInterval(fn, delay);

    var start = new Date().getTime();
    (function loop() {
    var current = new Date().getTime(),
    delta = current - start;

    if(delta >= delay) {
    fn.call();
    start = new Date().getTime();
    }

    requestAnimFrame(loop);
    })();
    };