ecrider / throttle-frequency Goto Github PK

View Code? Open in Web Editor NEW

Simple vanilla JavaScript tool to throttle execution frequency of any given function - time in milliseconds, no initial delay, optional scope declaration.

License: MIT License

JavaScript 100.00%

throttle-frequency's Introduction

Throttle Frequency

Simple vanilla JavaScript tool to throttle execution frequency of any given function - time in milliseconds, no initial delay, optional scope declaration.

Installation

Install via npm

$ npm install throttle-frequency

... or yarn

$ yarn add throttle-frequency

then require

var throttleFrequency = require('throttle-frequency');

or import

import throttleFrequency from 'throttle-frequency'

Usage

throttleFrequency(func, delay, scope);

param {function} func - function to execute
param {number} delay - delay in milisecionds
param {object} scope - optional scope in which function will be executed
return {function} - wrapped func

Examples

Throttling variable manipulation:

var test;
var testFunc = function(arg) { test = arg; };
var testFuncThrottled = throttleFrequency(testFunc, 500);

testFuncThrottled('TEST 1!');
console.log(test); // 'TEST 1!'

setTimeout(function() {
  testFuncThrottled('TEST 2!');
  console.log(test); // (after 501 ms) 'TEST 2!'
}, 501);

testFuncThrottled('TEST 3!');
console.log(test); // 'TEST 1!'

Emitting debounced window resize event - a little bit more practical example

var triggerEvent = function(name, data) {
  var newEvent = document.createEvent('Event');
  newEvent.initEvent(name, true, true);
  newEvent.data = data;
  window.dispatchEvent(newEvent);
};

var debounceEvent = function(opts) {
  var wrappedEvent = function(event) { triggerEvent(opts.name, event); };
  var debounced = throttleFrequency(wrappedEvent, opts.delay);
  opts.element.addEventListener(opts.type, debounced);
};

debounceEvent({
  element: window,
  type: 'resize',
  name: 'debouncedResize',
  delay: 800
});

window.addEventListener('debouncedResize', function(event) {
  console.log(event); // returns original 'resize' event object
  console.log('Width: ' + window.innerWidth + ' Height: ' + window.innerHeight);
});