Benchmark: Debounce - MeasureThat.net

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script>var underscore144 = _.noConflict();</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>var underscore160 = _.noConflict();</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script>var underscore183 = _.noConflict();</script>
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore.js"></script>
<script>var underscoreEdge = _.noConflict();</script>
<script src="https://rawgithub.com/lodash/lodash/master/lodash.js"></script>
<script>var lodashEdge = _.noConflict();</script>

Script Preparation code:

function debounce1a(func, wait, immediate) {
    let timeout, args, context, timestamp, result;

    const later = function() {
        const last = now() - timestamp;

        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            }
        }
    };
  
  	const debounced = function() {
        context = this;
        args = arguments;
        timestamp = now();
      
        let callNow = immediate && !timeout;
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }

        return result;
    };

    return debounced;
};

function debounce1b(func, wait, immediate) {
    let timeout, args, context, timestamp, result;

    const later = function() {
        const last = now() - timestamp;

        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                context = args = null;
            }
        }
    };

    const debounced = function() {
        context = this;
        args = arguments;
        timestamp = now();

        if (immediate && !timeout) {
            result = func.apply(context, args);
            context = args = null;
        }

        if (!timeout) timeout = setTimeout(later, wait);
        
        return result;
    }
    
    return debounced;
};

function debounce1c(func, wait, immediate = false) {
    let timeout, context, args, timestamp, result;

    const later = function() {
        const last = now() - timestamp;

        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                context = args = null;
            }
        }
    };

    const debounced = function() {
        context = this;
        args = arguments;

        if (immediate) {
            if (!timestamp || (now() - timestamp) >= wait) {
                result = func.apply(context, args);
                context = args = null;
            }
        } else {
            if (!timeout) timeout = setTimeout(later, wait);
        }
        timestamp = Date.now();

        return result;
    };

    return debounced;
};

function debounce2a(func, wait, immediate) {
    let timeout, result, context, args;
    let last = -Infinity;

    const later = function () {
        timeout = null;
        exec(context, args);
        if (!timeout) context = args = null;
    };

    const exec = function (context, args) {
        const now = now();
        const delta = now - last;
        if (immediate) last = now;
        if (delta < wait && delta >= 0) {
            if (!immediate) timeout = setTimeout(later, wait - delta);
        } else {
            result = func.apply(context, args);
        }
    };

  	const leading = function (params) {
        exec(this, params);
        return result;
    };

    const trailing = function (params) {
        last = now();
        context = this;
        args = params;
        if (!timeout) timeout = setTimeout(later, wait);
        return result;
    };

    const debounced = immediate ? leading : trailing;

    return debounced;
};

function debounce2b(func, wait, immediate) {
    let timeout, result, context, args;
    let last = -Infinity;

    const later = function() {
        timeout = null;
        exec(context, args);
        if (!timeout) context = args = null;
    };

    const exec = function(context, args) {
        const now = now();
        const delta = now - last;

      	if (immediate) last = now;
        if (delta < wait && delta >= 0) {
            if (!immediate) timeout = setTimeout(later, wait - delta);
        } else {
            result = func.apply(context, args);
        }
    };

    const debounced = function() {
        if (immediate) {
            exec(this, arguments);
        } else {
            last = now();
            context = this;
            args = arguments;
            if (!timeout) timeout = setTimeout(later, wait);
        }

        return result;
    }

    return debounced;
}

function debounce2c(func, wait, immediate) {
    let timeout, result, context, args;
    let last = -Infinity;

    const exec = function() {
        const now = Date.now();
        const delta = now - last;

        if (immediate) last = now;
        if (delta < wait && delta >= 0) {
            if (!immediate) timeout = setTimeout(exec, wait - delta);
        } else {
            timeout = null;
            result = func.apply(context, args);
            context = args = null;
        }
    };

    const leading = function(params) {
        context = this;
        args = params;
        exec();
        return result;
    };

    const trailing = function(params) {
        last = Date.now();
        context = this;
        args = params;
        if (!timeout) timeout = setTimeout(exec, wait);
        return result;
    };

    const debounced = immediate ? leading : trailing;

    return debounced;
};

function debounce2d(func, wait, immediate) {
    let timeout, result, context, args;
    let last = 0;

    const exec = function() {
        const now = now();
        const delta = now - last;
        if (immediate) last = now;

        if (delta < wait && delta >= 0) {
            if (!immediate) timeout = setTimeout(exec, wait - delta);
        } else {
            func.apply(context, args);
            timeout = context = args = null;
        }
    };

    const leading = function() {
        context = this,
        args = arguments;

        exec();
    };

    const trailing = function() {
        last = now();
        context = this,
        args = arguments;

        if (!timeout) timeout = setTimeout(exec, wait);
    };

    const debounced = (immediate) ? leading : trailing;

    return debounced;
};

/**************************************************/

var now = Date.now || function() {
    return new Date().getTime();
};

var fn = function() {},
	db_underscore_144 = underscore144.debounce(fn, 100),
    db_underscore_160 = underscore160.debounce(fn, 100),
    db_underscore_183 = underscore183.debounce(fn, 100),
    db_underscore_edge = underscoreEdge.debounce(fn, 100),
    db_lodash_edge = lodashEdge.debounce(fn, 100),
    db1a = debounce1a(fn, 100),
    db1b = debounce1b(fn, 100),
    db1c = debounce1c(fn, 100),
    db2a = debounce2a(fn, 100),
    db2b = debounce2b(fn, 100),
    db2c = debounce2c(fn, 100),
    db2d = debounce2d(fn, 100);

Tests:

Underscore 1.4.4
db_underscore_144();
Underscore 1.6.0
db_underscore_160();
Underscore 1.8.3
db_underscore_183();
Underscore Edge
db_underscore_edge();
Lodash Edge
db_lodash_edge();
Debounce #1a
db1a();
Debounce #1b
db1b();
Debounce #1c
db1c();
Debounce #2a
db2a();
Debounce #2b
db2b();
Debounce #2c
db2c();
Debounce #2d
db2d();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Underscore 1.4.4
Underscore 1.6.0
Underscore 1.8.3
Underscore Edge
Lodash Edge
Debounce #1a
Debounce #1b
Debounce #1c
Debounce #2a
Debounce #2b
Debounce #2c
Debounce #2d

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/112.0

Browser/OS: Firefox 112 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Underscore 1.4.4	905797.1 Ops/sec
Underscore 1.6.0	11526560.0 Ops/sec
Underscore 1.8.3	11861450.0 Ops/sec
Underscore Edge	8182452.0 Ops/sec
Lodash Edge	11129620.0 Ops/sec
Debounce #1a	11789910.0 Ops/sec
Debounce #1b	11794700.0 Ops/sec
Debounce #1c	11602260.0 Ops/sec
Debounce #2a	13289230.0 Ops/sec
Debounce #2b	11776280.0 Ops/sec
Debounce #2c	11532800.0 Ops/sec
Debounce #2d	11757770.0 Ops/sec

Debounce (version: 38)

Comparing performance of: Underscore 1.4.4 vs Underscore 1.6.0 vs Underscore 1.8.3 vs Underscore Edge vs Lodash Edge vs Debounce #1a vs Debounce #1b vs Debounce #1c vs Debounce #2a vs Debounce #2b vs Debounce #2c vs Debounce #2d

Created: 7 years ago by: Registered User

Jump to the latest result

Underscore 1.4.4

Underscore 1.6.0

Underscore 1.8.3

Underscore Edge

Lodash Edge

Debounce #1a

Debounce #1b

Debounce #1c

Debounce #2a

Debounce #2b

Debounce #2c

Debounce #2d

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A