Skip to content

Library: pumpEvent()

Eugene Lazutkin edited this page Jul 5, 2018 · 3 revisions

pumpEvent() module is a function, which is used to throttle events using a time-handling function, e.g., delay().

The definition is very simple:

import delay   from './delay';
import getPath from './getPath';

const pumpEvent = (target, attrName, path='', ms=500, wrap=delay) =>
  wrap(e => {
    target.setAttribute(attrName, getPath(e, path));
  }, ms);

Usage

In a module-enabled environment (like Babel) it can be accessed like that:

import pumpEvent from '@researchnow/reno/src/utils/pumpEvent';

In global-based environments (like a browser) it is frequently mapped to Reno.utils.pumpEvent.

pumpEvent(target, attrName, path='', ms=500, wrap=delay)

The function takes the following arguments:

  • target is a DOM node, which is usually a web component. It will be controlled by events.
  • attrName is an attribute name, which will be set according to events.
  • path is an object path (see getPath()). It is used on an event object to extract a value for the attribute, usually from the detail part.
  • ms is a positive integer, which specifies a time delay to collect events.
  • wrap is a time-handling function, which wraps the setting of an attribute. It consumes ms as well.

This function returns an event handler function.

Examples

The example below updates reno-table according to changes in reno-search.

const renoTable = document.querySelector('reno-table');

document.documentElement.addEventListener('reno-change',
  Reno.utils.pumpEvent(renoTable, 'filter', 'detail.value'));

Clone this wiki locally