nohop

Debouncing is the practice of calling a function a MAXIMUM of one time within a certain amount of time.

This is a small (<12kb) package that provides the ability to debounce a function. It also allows cancellation of the debounce after it's been started.

• nohop
  • Installation
  • Usage
    • debounce
    • cancel
  • Examples
    • Event Handlers
    • React
    • License

Installation

Note: This package was compiled for ES6. It is only meant to be used in modern browsers. Don't try an use it in IE, or anything that doesn't support arrow functions

Using npm

npm install --save nohop

Using yarn

yarn add nohop

Usage

debounce

debounce(fn, wait = 300) will return a function that, when called, will trigger the passed fn after the specified amount of wait time. If the debounced function is called again before the amount of wait time has elapsed, then the internal timer will reset, delaying the fn invocation.

import debounce from 'nohop';

const originalFunction = async () => {
  const response = await fetch(...);
  const json = await response.json();
  console.log(json);
};

const debouncedFunction = debounce(originalFunction, 300);
// Use the debounced function somewhere

cancel

debounce(fn, wait = 300).cancel() will cancel all existing invocations of fn (if any), resetting the timers.

// ...
const debouncedFunction = debounce(originalFunction, 300);
debouncedFunction(); // call the function
debouncedFunction.cancel(); // immediately cancel the function, resulting in 'originalFunction' never being invoked.

Examples

Event Handlers

// Debouncing a mouse click event. Only a single mouse event
// will be registered if the user is clicking rapidly
import debounce from 'nohop';

const mouseDownHandler = (ev: MouseEvent) => {
  console.log('user moused down on: ', ev.target);
};

window.addEventListener('mousedown', debounce(mouseDownHandler, 200));

const debounce = require('nohop');

const searchInput = document.createElement('input');
searchInput.placeholder = 'type something...';
searchInput.id = 'search';
searchInput.type = 'text';
// or in html: <input type="text" id="search" placeholder="type something..." />

document.body.appendChild(searchInput);

const search = (ev) => {
  console.log('searching...', ev.target.value);
};
const debouncedSearch = debounce(search, 300);

document.getElementById('search').onkeypress = debouncedSearch;

React

import debounce from 'nohop';

const search = (ev: React.ChangeEvent<HTMLInputElement>) => {
  // Make an API request with ev.target.value
  console.log('searching...', ev.target.value);
};

const debouncedSearch = debounce(search, 300);

<div>
  <input placeholder="type something" onChange={debouncedSearch} />
</div>;

import debounce from 'nohop';

// Demonstrates basic search debouncing, but also provides an example of passing
// custom parameters along with whatever Event is being triggered.
const search = (filter: boolean, ev: React.ChangeEvent<HTMLInputElement>) => {
  console.log('custom filter parameter', filter);
  console.log('input value', ev.target.value);
};

const debouncedSearch = (filter: boolean) =>
  debounce((ev) => search(filter, ev), 300);

<div>
  <input placeholder="type something" onChange={debouncedSearch(true)} />
</div>;

License

MIT

This function is very similar to debounce and lodash.debounce, but smaller, inherently typed (no @types/... package needed), and without the ability to flush any existing debounced functions.