Debounce class

debounce.ts

/**
 * Debounce
 *
 * Prevents a function from being fired too often by determining
 * a difference in time from the last time in which it was fired
 *
 * @author Matt Kenefick <polymermallard.com>
 */
export default class Debounce {
    /**
     * Debounced function that we will execute
     *
     * @type function
     */
    public callback: () => void;
    
    /**
     * Time in between executions
     *
     * @type number
     */
    public threshold: number;
    
    /**
     * Last time this function was triggered
     *
     * @type number
     */
    private lastTrigger: number = 0;
    
    /**
     * @param function callback
     * @param number threshold
     * @return function
     */
    public constructor(
        callback: () => void, 
        threshold: number = 200
    ): () => void {
        this.callback = callback;
        this.threshold = threshold;
            
        return this.run.bind(this);
    }
    
    /**
     * Executable function that applies debounce logic
     * 
     * @return void
     */
    public run(): void {
        const now: number = Date.now();
        const diff: number = now - this.lastTrigger;
        
        if (diff > this.threshold) {
            this.lastTrigger = now;
            this.callback();
        }
    }
}

inclusion-a.ts

import Debounce from './debounce';

function myFunction() {
    console.log(‘This is the debounced function’);
}

const event = new Debounce(myFunction, 500);

// Run via interval at 60FPS, execute function every 500ms
setInterval(event, 1000 / 60);

inclusion-b.ts

import InclusiveDebounce from './inclusive-debounce';

function myScrollFunction() {
    console.log(‘This fires on scroll every 200ms’);
}

const event = new Debounce(myScrollFunction, 200);

// Run on document scroll, only execute every 200ms
window.addEventListener(‘scroll’, event);

inclusive-debounce.ts

/**
 * InclusiveDebounce
 *
 * Prevents a function from being fired too often by determining
 * a difference in time from the last time in which it was fired.
 * 
 * Applies inclusive techniques to execute functions one last time.
 *
 * @author Matt Kenefick <polymermallard.com>
 */
export default class InclusiveDebounce {
    /**
     * Debounced function
     *
     * @type function
     */
    public callback: () => void;
    
    /**
     * Time in between triggers
     *
     * @type number
     */
    public threshold: number;
    
    /**
     * Last time this function was triggered
     *
     * @type number
     */
    private lastTrigger: number = 0;
    
    /**
     * Timeout for calling future events
     *
     * @type number
     */
    private timeout: number = 0;
    
    /**
     * @param function callback
     * @param number threshold
     * @return function
     */
    public constructor(
        callback: () => void, 
        threshold: number = 200
    ): () => void {
        this.callback = callback;
        this.threshold = threshold;
            
        return this.run.bind(this);
    }
    /**
     * Executable function
     * 
     * @return void
     */
    public run(): void {
        const now: number = Date.now();
        const diff: number = now - this.lastTrigger;
        
        // Execute Immediately
        if (diff > this.threshold) {
            this.lastTrigger = now;
            this.callback();
        }
        
        // Cancel future event, if exists
        if (this.timeout !== 0) {
            clearTimeout(this.timeout);
            this.timeout = 0;
        }
        
        // Create future event
        this.timeout = setTimeout(this.callback, this.threshold);
    }
}