Debounce (lodash)

Trailing and leading

by Julien Roche

HTML

<input type="text" value="" />

<table style="width: 100%; border: 1px solid black; margin-top: 1rem;">
  <thead>
    <tr>
      <th>Trailing</th>
      <th>Leading</th>
      <th>Both</th>
    </tr>
  </thead>
  
  <tbdoy>
    <tr>
      <td>
        <div id="immediateFalse"></div>
      </td>
      <td>
        <div id="immediateTrue"></div>
      </td>
      <td>
        <div id="both"></div>
      </td>
    </tr>
  </tbdoy>
</table>

CSS

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}

Babel + JSX

const inputElement = document.querySelector('input');
const immediateFalse = document.querySelector('#immediateFalse');
const immediateTrue = document.querySelector('#immediateTrue');
const both = document.querySelector('#both');

// From https://github.com/lodash/lodash/blob/master/debounce.js


/**
 * Creates a debounced function that delays invoking `func` until after `wait`
 * milliseconds have elapsed since the last time the debounced function was
 * invoked, or until the next browser frame is drawn. The debounced function
 * comes with a `cancel` method to cancel delayed `func` invocations and a
 * `flush` method to immediately invoke them. Provide `options` to indicate
 * whether `func` should be invoked on the leading and/or trailing edge of the
 * `wait` timeout. The `func` is invoked with the last arguments provided to the
 * debounced function. Subsequent calls to the debounced function return the
 * result of the last `func` invocation.
 *
 * **Note:** If `leading` and `trailing` options are `true`, `func` is
 * invoked on the trailing edge of the timeout only if the debounced function
 * is invoked more than once during the `wait` timeout.
 *
 * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
 * until the next tick, similar to `setTimeout` with a timeout of `0`.
 *
 * If `wait` is omitted in an environment with `requestAnimationFrame`, `func`
 * invocation will be deferred until the next frame is drawn (typically about
 * 16ms).
 *
 * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
 * for details over the differences between `debounce` and `throttle`.
 *
 * @since 0.1.0
 * @category Function
 * @param {Function} func The function to debounce.
 * @param {number} [wait=0]
 *  The number of milliseconds to delay; if omitted, `requestAnimationFrame` is
 *  used (if available).
 * @param {Object} [options={}] The options object.
 * @param {boolean} [options.leading=false]
 * ...