I have a live view app where the user has some analog controls, like sliders.
When the user drags the slider, I send the new slider position to the server, update the socket state and send some response.
I works very well, but I have a small issue, if the users drags the slider back and forth quickly, it will send a lot of events to the phoenix live view, which the elixir code can cope with with no problem, but the JS side is lagging. Even as I am updating a single node in the page, it can take up to 2 seconds for events to “settle down” on the JS side.
So basically the behavior is as follow:
- user drag slider back and forth, I watch the slider position in js and I use pushEvent in the hook to send the new position
- server side I do some light state update, I see that the last value has been reached in the server console (if the user generated 100 event, I see in the phoenix console that event 100 has been received and processed)
- client side, I stopped all interaction, but I still see a series of
phx-Fj51eTYOX9gIKG7C updatebeing printed in the console for like 1-2 seconds. Those updates are tiny and update only one html element each, but they still take some time to be processed.
I know I could debounce the
pushEvent on the JS side, but the problem is that I need the phoenix state in sync with the client, so I need all events, and phoenix has no problem processing them.
That’s why I am wondering if there is a way to see all incomming events, group them by element id, sort them by date and only apply the last one to the DOM.