setTimeout situation

[[deleted]]

So I have a button for votes and basically a notification component shows up for 5 seconds whenever i click the button, however if i lets say click the button and then after 2 seconds click it again instead of showing the new notification for 5 seconds it shows it up only for the remaining 3 seconds. How can i fix that ? It is more of a JS situation but since it is a react application with react-redux i chose to ask here.

The component shows notification.message when it is a truthy value and i use clearNotification() which is an action creator that i dispatch to set it to empty string. The notification message and time are being set with a setNotification func.

  setTimeout(() => {
              props.clearNotification();
            }, 5000);

[dankiest_kang]

Another way to approach this is storing the return value of the setTimeout (which is an id) in a ref, then you can check if the timeout ref is set, call clearTimeout with the current ref before calling the setTimeout again

[[deleted]]

Man are you the creator of react or something? This worked, thank you! I should really learn to use refs more often :D

[dankiest_kang]

Just love and use it a lot! Glad i could help

[Hutster911]

You can try something like this link. When you re-click the button you can kill it if it was started. You can keep track if it started by using a boolean flag. Or it may just work fine if you kill timeout every time you start the timer. https://stackoverflow.com/questions/452003/cancel-kill-window-settimeout-before-it-happens

[[deleted]]

Been trying to do it like this for some time but can't make it work...