Add a way of clearing the event listeners array and remove by ID about easytimer.js HOT 6 CLOSED

Hi!

I have just published the version 4.5.0 with your removeAllEventListeners method.

Thanks a lot for your contribution :).

from easytimer.js.

Hi!

I have just published the version 4.5.0 with your removeAllEventListeners method.

Thanks a lot for your contribution :).

Awesome, glad to be of help, thank you for the awesome library!

from easytimer.js.

Hi!

Thank you a lot for your PRs!

I like a lot the first one, it's a feature that I wanted to include in the library. But I am not sure about the second one. If you need to remove a listener, you can store the arrow function in a variable and pass it to removeEventListener. It is the pattern used for event listeners. Something like this:

const fn = () => {};
timer.addEventListener('secondsUpdated', fn);
timer.removeEventListener('secondsUpdated', fn);

I want to keep the library as light as possible, so I fear that I'll reject this second one.

Nevertheless, I'll review your PRs ASAP and I'll tell you the news.

Thanks again!

from easytimer.js.

Hi!

Thank you a lot for your PRs!

I like a lot the first one, it's a feature that I wanted to include in the library. But I am not sure about the second one. If you need to remove a listener, you can store the arrow function in a variable and pass it to removeEventListener. It is the pattern used for event listeners. Something like this:

const fn = () => {};
timer.addEventListener('secondsUpdated', fn);
timer.removeEventListener('secondsUpdated', fn);

I want to keep the library as light as possible, so I fear that I'll reject this second one.

Nevertheless, I'll review your PRs ASAP and I'll tell you the news.

Thanks again!

Hi Albert, glad you liked the first idea! Now let me pitch you about the 2nd one 😆

As you already know, your library is really good to be used along with React, and in React it's very common to define arrow functions within components (maybe based on props and sometimes defined inside useEffect, etc). The consequence of this is that since functional components are called multiple times, you can easily end up re-defining the same arrow function multiple times as well, and once you try to use the equality comparator === between the same arrow function you'll get a false result since it's the same function defined twice. In other words, the equality comparator used in this.events[event].indexOf(listener) from the removeListener method is not reliable when using arrow functions on a framework like React

I know that a workaround is to store the arrow function with useState but this not only adds a lot of unnecessary complexity but it can also become impossible on more complex scenarios (for example in my case I'm using your timer within a state machine with the xstate library and persisting the function between states is a no-go)

I think that the idea of an optional ID is the simplest way to address this pitfall of arrow functions, lmk what you think!

from easytimer.js.

Hi again!

I think that in that case, you can use the hook useCallback (https://reactjs.org/docs/hooks-reference.html#usecallback) to use always the same arrow function. Also, I think if you define your arrow functions inside the useEffect and removed them from the listeners in the unmount function, the arrow function also should be the same.

By the way, do you know there is an Easytimer React Hook? It updates the component where it is used every time the timer changes with the configured precision. Maybe it is useful to you and you don't need the event listeners anymore.

Here is the repo: https://github.com/albert-gonzalez/easytimer-react-hook
And a little demo: https://albert-gonzalez.github.io/easytimer-react-hook/

Best regards!

from easytimer.js.

I close the issue.

Thanks again for your support!

from easytimer.js.