ResizeObservable.js

import { debounce } from 'lodash';


class ResizeObservable {
    constructor() {
        this.listeners = [];

        this._resizeFunc = debounce(() => {
            this.emit();
        }, 300);
    }
    subscribe(func) {
        if (this.listeners.length === 0) {
            window.addEventListener('resize', this._resizeFunc);
        }

        this.listeners.push(func);

        return {
            unsubscribe: () => {
                this.listeners = this.listeners.filter((f) => f !== func);

                if (this.listeners.length === 0) {
                    window.removeEventListener('resize', this._resizeFunc);
                }
            },
        };
    }
    emit(message) {
        if (this.listeners.length === 0) return;
        // console.log('listeners', this.listeners);
        for (let i = 0; i < this.listeners.length; i++) {
            this.listeners[i](message);
        }
    }
}