Easy to Use RxJS Queue for Throttle/Debounce/Delay/DelayExecute
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode env setup Oct 30, 2017
docs/images
scripts clean Sep 16, 2018
src follow typescript 3.0 with resolveJsonModule (#25) Sep 16, 2018
tests follow typescript 3.0 with resolveJsonModule (#25) Sep 16, 2018
.editorconfig init files Oct 26, 2017
.gitignore
.travis.yml fix travis conditional deploy May 28, 2018
LICENSE clean Sep 16, 2018
README.md merge Nov 27, 2018
appveyor.yml fix pack error May 6, 2018
package.json chore(package): update @types/sinon to version 7.0.0 (#33) Jan 9, 2019
rollup.config.js merge Nov 27, 2018
tsconfig.json follow typescript 3.0 with resolveJsonModule (#25) Sep 16, 2018
tslint.json follow typescript 3.0 with resolveJsonModule (#25) Sep 16, 2018

README.md

RX-QUEUE

Greenkeeper badge Build Status Windows Build status NPM Version Downloads Powered by TypeScript

Easy to Use ReactiveX Queue that Supports Delay/DelayExector/Throttle/Debounce Features Powered by RxJS.

RxQueue

Picture Credit: Queues in JavaScript

CLASSES

  1. RxQueue
  2. DelayQueue
  3. ThrottleQueue
  4. DebounceQueue
  5. DelayQueueExector

RxQueue

RxQueue is the base class of all other queues. It extends from RxJS Subject.

Example:

import { RxQueue } from 'rx-queue'

const queue = new RxQueue()
queue.next(1)
queue.next(2)
queue.next(3)

queue.subscribe(console.log)
// Output: 1
// Output: 2
// Output: 3

DelayQueue

DelayQueue passes all the items and add delays between items.

DelayQueue

Picture Credit: ReactiveX Single Operator Delay

Practical examples of DelayQueue:

  1. We are calling a HTTP API which can only be called no more than ten times per second, or it will throw a 500 error.

Example:

import { DelayQueue } from 'rx-queue'

const delay = new DelayQueue(500)  // set delay period time to 500 milliseconds
delay.subscribe(console.log)

delay.next(1)
delay.next(2)
delay.next(3)

// Output: 1
// Paused 500 millisecond...
// Output: 2
// Paused 500 millisecond...
// Output: 3

ThrottleQueue

ThrottleQueue passes one item and then drop all the following items in a period of time.

ThrottleQueue

Picture Credit: ReactiveX Observable Throttle

By using throttle, we don't allow to our queue to pass more than once every X milliseconds.

Practical examples of ThrottleQueue:

  1. User is typing text in a textarea. We want to call auto-save function when user is typing, and want it only run at most once every five minutes.

Example:

import { ThrottleQueue } from 'rx-queue'

const throttle = new ThrottleQueue(500)  // set period time to 500 milliseconds
throttle.subscribe(console.log)

throttle.next(1)
throttle.next(2)
throttle.next(3)

// Output: 1

DebounceQueue

DebounceQueue drops a item if there's another one comes in a period of time.

DebounceQueue

Picture Credit: ReactiveX Observable Debounce

The Debounce technique allow us to deal with multiple sequential items in a time period to only keep the last one.

Debouncing enforces that no more items will be passed again until a certain amount of time has passed without any new items coming.

Practical examples of DebounceQueue:

  1. User is typing text in a search box. We want to make an auto-complete function call only after the user stop typing for 500 milliseconds.

Example:

import { DebounceQueue } from 'rx-queue'

const debounce = new DebounceQueue(500)  // set period time to 500 milliseconds
debounce.subscribe(console.log)

debounce.next(1)
debounce.next(2)
debounce.next(3)

// Paused 500 millisecond...
// Output: 3

DelayQueueExector

DelayQueueExector calls functions one by one with a delay time period between calls.

DelayQueueExector

Picture Credit: ReactiveX Single Operator Delay

Practical examples of DelayQueueExector:

  1. We are calling a HTTP API which can only be called no more than ten times per second, or it will throw a 500 error.

Example:

import { DelayuQueueExector } from 'rx-queue'

const delay = new DelayuQueueExector(500)  // set delay period time to 500 milliseconds

delay.execute(() => console.log(1))
delay.execute(() => console.log(2))
delay.execute(() => console.log(3))

// Output: 1
// Paused 500 millisecond...
// Output: 2
// Paused 500 millisecond...
// Output: 3

SEE ALSO

CHANGELOG

v0.6 - Sep 2018

  1. fix exception bug in browser(ie. Angular)

v0.4 - May 2018

  1. Upgrade to RxJS 6
  2. Moved CI from Travis-ci.org to Travis-ci.com

v0.2 - Oct 30, 2017

  1. Support: DelayQueue, ThrottleQueue, DebounceQueue, DelayQueueExector.
  2. first version

AUTHOR

Huan LI <zixia@zixia.net> (http://linkedin.com/in/zixia)

profile for zixia at Stack Overflow, Q&A for professional and enthusiast programmers

COPYRIGHT & LICENSE

  • Code & Docs © 2017-2018 Huan LI <zixia@zixia.net>
  • Code released under the Apache-2.0 License
  • Docs released under Creative Commons