Skip to content

Instantly share code, notes, and snippets.

@osheinonen

osheinonen/debounce.js

Forked from beaucharman/debounce.js
Created November 10, 2017 11:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save osheinonen/0b137ffc51f61935b4df1ceb2f481ec0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save osheinonen/0b137ffc51f61935b4df1ceb2f481ec0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @beaucharman beaucharman revised this gist Feb 1, 2017. No changes.
  2. @beaucharman beaucharman revised this gist Jul 11, 2016. 1 changed file with 21 additions and 17 deletions.
    38 changes: 21 additions & 17 deletions debounce.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +1,3 @@
    // Normal event
    // event | | |
    // time ----------------
    // callback | | |

    // Call log only when it's been 100ms since the last sroll
    // scroll | | |
    // time ----------------
    // callback | |
    // |100| |100|

    const handleScroll = debounce((e) => {
    console.log('Window scrolled.')
    }, 100)

    window.addEventListener('scroll', handleScroll)

    function debounce(callback, wait, context = this) {
    let timeout = null
    let callbackArgs = null
    @@ -27,3 +10,24 @@ function debounce(callback, wait, context = this) {
    timeout = setTimeout(later, wait)
    }
    }

    /**
    * Normal event
    * event | | |
    * time ----------------
    * callback | | |
    *
    * Call log only when it's been 100ms since the last sroll
    * scroll | | |
    * time ----------------
    * callback | |
    * |100| |100|
    */

    /* usage
    const handleScroll = debounce((e) => {
    console.log('Window scrolled.')
    }, 100)
    window.addEventListener('scroll', handleScroll)
    */
  3. @beaucharman beaucharman renamed this gist Jul 11, 2016. 1 changed file with 1 addition and 30 deletions.
    31 changes: 1 addition & 30 deletions debounceAndThrottle.js → debounce.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    // Normal event
    // event | | |
    // time ----------------
    // callback | | |
    @@ -26,33 +27,3 @@ function debounce(callback, wait, context = this) {
    timeout = setTimeout(later, wait)
    }
    }

    // Call search at most once per 300ms while keydown

    // keydown | | | |
    // time -----------------
    // search | |
    // |300| |300|

    const handleKeydown = debounce((e) => {
    console.log(e.target.value)
    }, 300)

    input.addEventListener('keydown', handleKeydown)

    function throttle(callback, wait, context = this) {
    let timeout = null
    let callbackArgs = null

    const later = () => {
    callback.apply(context, callbackArgs)
    timeout = null
    }

    return function() {
    if (!timeout) {
    callbackArgs = arguments
    timeout = setTimeout(later, wait)
    }
    }
    }
  4. @beaucharman beaucharman revised this gist Jul 11, 2016. 1 changed file with 31 additions and 29 deletions.
    60 changes: 31 additions & 29 deletions debounceAndThrottle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,56 +1,58 @@
    // input.addEventListener('keydown', search);

    // keydown | | |
    // event | | |
    // time ----------------
    // search | | |


    input.addEventListener('keydown', debounce(myObject.search, 100, myObject));
    // Call search only when it's been 100ms since the last keydown
    // callback | | |

    // keydown | | |
    // Call log only when it's been 100ms since the last sroll
    // scroll | | |
    // time ----------------
    // search | |
    // callback | |
    // |100| |100|

    function debounce(callback, duration, context) {
    const handleScroll = debounce((e) => {
    console.log('Window scrolled.')
    }, 100)

    window.addEventListener('scroll', handleScroll)

    function debounce(callback, wait, context = this) {
    let timeout = null
    let callbackArgs = null

    var timeout = null
    var callbackArgs = null

    var later = function() {
    callback.apply(context, callbackArgs)
    }
    const later = () => callback.apply(context, callbackArgs)

    return function() {
    callbackArgs = arguments;
    callbackArgs = arguments
    clearTimeout(timeout)
    timeout = setTimeout(later, duration)
    timeout = setTimeout(later, wait)
    }
    }

    // input.addEventListener('keydown', throttle(search, 100));
    // Call search at most once per 100ms
    // Call search at most once per 300ms while keydown

    // keydown | | | |
    // time -----------------
    // search | |
    // |100| |100|
    // |300| |300|

    function throttle(callback, duration, context) {

    var timeout = null
    var callbackArgs = null
    const handleKeydown = debounce((e) => {
    console.log(e.target.value)
    }, 300)

    input.addEventListener('keydown', handleKeydown)

    function throttle(callback, wait, context = this) {
    let timeout = null
    let callbackArgs = null

    var later = function() {
    const later = () => {
    callback.apply(context, callbackArgs)
    timeout = null
    }

    return function() {
    if (!timeout) {
    callbackArgs = arguments;
    timeout = setTimeout(later, duration)
    callbackArgs = arguments
    timeout = setTimeout(later, wait)
    }
    }
    }
  5. @beaucharman beaucharman created this gist Jun 4, 2016.
    56 changes: 56 additions & 0 deletions debounceAndThrottle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    // input.addEventListener('keydown', search);

    // keydown | | |
    // time ----------------
    // search | | |


    input.addEventListener('keydown', debounce(myObject.search, 100, myObject));
    // Call search only when it's been 100ms since the last keydown

    // keydown | | |
    // time ----------------
    // search | |
    // |100| |100|

    function debounce(callback, duration, context) {

    var timeout = null
    var callbackArgs = null

    var later = function() {
    callback.apply(context, callbackArgs)
    }

    return function() {
    callbackArgs = arguments;
    clearTimeout(timeout)
    timeout = setTimeout(later, duration)
    }
    }

    // input.addEventListener('keydown', throttle(search, 100));
    // Call search at most once per 100ms

    // keydown | | | |
    // time -----------------
    // search | |
    // |100| |100|

    function throttle(callback, duration, context) {

    var timeout = null
    var callbackArgs = null

    var later = function() {
    callback.apply(context, callbackArgs)
    timeout = null
    }

    return function() {
    if (!timeout) {
    callbackArgs = arguments;
    timeout = setTimeout(later, duration)
    }
    }
    }