How to prevent Event Listener firing event multiple times

[mynguyen98]

How to prevent multiple presses on the button. Such as press the button left to navigate left on a rail, It will wait for the slide rail scroll to finish before firing the next event:

For example with normal event listener, I can do like this:

          useEffect(() => {
        const yourFunction = () => {console.log('hi')}
        document.addEventListener('keyup', yourFunction)

        return () => {
            document.removeEventListener('keyup', yourFunction)
        }
    }, [])

But I don't know how to do it with onEnterPress that libraries provides

[Dmitriy Bryokhin]

Hello.

Perhaps you could use onEnterRelease instead of onEnterPress to achieve the same as keyup listener.
For the directional navigation I'm afraid there is no easy way to "wait until animation ends". You might try to use onArrowPress callback, you can return false from this method if you want to "block" the subsequent callbacks, and then return true when animation ends and you want to resume new events. It is not super convenient, but it should work :) We normally just use the throttle feature to slow down the events and let the animation some time to finish smoothly.
Please let us know if it doesn't help in your case and feel free to reopen this.