UNPKG

eventemitter-super

Version:

An event emitter/listener tool based on EventEmitter3.

252 lines (187 loc) 5.7 kB
# eventemitter-super ![QQ](https://img.shields.io/badge/QQ-306863030-green.svg) [![GitHub](https://img.shields.io/badge/GitHub-roman_123-blue.svg)](https://github.com/qq306863030/eventemitter-super) [![NPM](https://img.shields.io/badge/NPM-roman_123-blue.svg)](https://www.npmjs.com/package/eventemitter-super) [English](./README.md) | [简体中文](./README_CN.md) > An event emitter/listener tool based on EventEmitter3. ## Setup ### Node ```shell npm install --save eventemitter-super ``` ### Browser ```html <script src="./lib/eventemitter-super.umd.js"></script> ``` ## Usage You can use it as a browser global or as a CommonJS/ESM module. ```js // Browser global var eventBus = new EventTool.EventEmitterSuper() // CommonJS const EventEmitterSuper = require('eventemitter-super') const bus1 = new EventEmitterSuper() // ES module import EventEmitterSuper from 'eventemitter-super' const bus2 = new EventEmitterSuper() ``` ## Examples ```js // Aliases of common methods: // bindOnce(once), bind(on), fire(emit), unbind(off), un(off), addOnceListeners(onceEvents) ``` ### Example 1 - Return a disposer function ```js import EventEmitterSuper from 'eventemitter-super' const eventBus = new EventEmitterSuper() const destroyEvent = eventBus.on('event1', () => { console.log('event1 fired') }) destroyEvent() // destroy listener ``` ### Example 2 - HTML element event listener ```js const eventBus = new EventEmitterSuper() const div = document.getElementById('test-div') const destroyEvent = eventBus.addHtmlListener(div, 'click', () => {}) destroyEvent() ``` ### Example 3 - Debounce and throttle listeners ```js // Debounce const eventBus = new EventEmitterSuper() const destroyDebounce = eventBus.onDebounce('event1', function () { console.log('event1', arguments) }, 1000, null) const timer1 = setInterval(() => { eventBus.fire('event1', 1, 2, 3) }, 100) setTimeout(() => { clearInterval(timer1) destroyDebounce() }, 5000) // Throttle const destroyThrottle = eventBus.onThrottle('event2', function () { console.log('event2', arguments) }, 1000, null) const timer2 = setInterval(() => { eventBus.fire('event2', 1, 2, 3) }, 100) setTimeout(() => { clearInterval(timer2) destroyThrottle() }, 5000) ``` ### Example 4 - HTML event debounce and throttle ```html <body> <button id="btn">click me</button> <button id="btn2">stop listen</button> <script src="./lib/eventemitter-super.umd.js"></script> <script> const eventBus = new EventTool.EventEmitterSuper() const btn = document.getElementById('btn') const btn2 = document.getElementById('btn2') const destroyBtn = eventBus.onDebounceHtmlEvent(btn, 'click', () => { console.log('click btn') }, 1000, null) eventBus.onHtmlEvent(btn2, 'click', () => { destroyBtn() }, null) </script> </body> ``` ### Example 5 - Wait for multiple events once ```js const eventBus = new EventEmitterSuper() eventBus.onceEvents(['event1', 'event2'], () => { console.log('event1 and event2') }) setTimeout(() => eventBus.emit('event2'), 1000) setTimeout(() => eventBus.emit('event1'), 2000) ``` ### Example 6 - Trigger callback after N executions ```js const eventBus = new EventEmitterSuper() eventBus.onceByExecCount('test', () => { console.log('event emitted') }, 3) eventBus.emit('test') eventBus.emit('test') eventBus.emit('test') ``` ### Example 7 - Max wait time fallback ```js const eventBus = new EventEmitterSuper() eventBus.onceWithMaxWaitTime('test', () => { console.log('event emitted') }, 3000) eventBus.onceEventsWithMaxWaitTime(['test1', 'test2'], () => { console.log('event emitted') }, 3000) eventBus.onceEventsWithMaxWaitTime(['test1', 'test1'], () => { console.log('event emitted') }, 3000) ``` ### Example 8 - Promise wrappers ```js // Promise wrapper methods // oncePromise // onceEventsPromise // onceByExecCountPromise // onceWithMaxWaitTimePromise // onceEventsWithMaxWaitTimePromise async function test1() { const res = await eventBus.oncePromise('test') console.log(res) } test1() setTimeout(() => { eventBus.emit('test', 'eventobj1', 'eventobj2') }, 3000) async function test2() { const res = await eventBus.onceWithMaxWaitTimePromise('test1', 3000) console.log(res) } test2() setTimeout(() => { eventBus.emit('test1', 'eventobj1', 'eventobj1') }, 1000) ``` ### Example 9 - Wait for all listeners with emitPromise ```js import { EventEmitterSuper } from 'eventemitter-super' const eventBus = new EventEmitterSuper() eventBus.on('task', async (id) => { await new Promise((resolve) => setTimeout(resolve, 800)) console.log('async listener done:', id) }) eventBus.on('task', (id) => { console.log('sync listener done:', id) }) async function run() { console.log('before emitPromise') await eventBus.emitPromise('task', 1001) console.log('after emitPromise') } run() ``` ### Example 10 - Catch errors from emitPromise ```js import { EventEmitterSuper } from 'eventemitter-super' const eventBus = new EventEmitterSuper() eventBus.on('task', async () => { await new Promise((resolve) => setTimeout(resolve, 200)) throw new Error('listener failed') }) eventBus.on('task', () => { console.log('another listener finished') }) async function run() { try { await eventBus.emitPromise('task') console.log('all listeners completed') } catch (err) { console.error('emitPromise failed:', err.message) } } run() ```