Hello, so I am experiencing a problem in my javascript app where I cannot stop a user spamming a button. The app is used to draw three random numbers from a range. when a button is clicked, a number is drawn and a special animation plays, then the next number can be drawn. I am having trouble preventing the user from spamming the draw button. So far I have tried using a local variable called enabled which is set to false when the animation is playing and checked to be true before the actual animation function executes (its set back to false after it executes). I have also tried to remove and add the event listener of the button dynamically when it is pressed. Is there any way you guys think I can solve the issue? Thank you.
The code should be in an image with the post.
Just a heads up: if the spam is a problem, you also need to handle it server-side. Anything you do in JS is fencepost security, they’ll trivially get around it.
Similar to SaintWacko, it looks to me like your invoke isn’t being allowed to complete before continuing. Your indenting in the animation function threw me off, were you intending to have the following lines inside a callback or a .then()?
I wonder if the update_current_box call is asynchronous. Since you’re not awaiting it, enabled would be set to true immediately, without waiting for whatever that function is doing to finish. Try putting a log statement right before enabled is set back to true. If I’m right, you’ll see that loud statement before the animation finishes.
You need a reference to your Eventhandler. So instead of just giving an anonymous callback function to your addEventHandler store it in a variable instead. Then your can call removeEventHandler with the same event type and the variable of your Eventhandler you want to remove.
For your own sanity, please use a formatter for your IDE. This will also help when others (and you) read the code, as indentation is a convenience for understanding program flow. From what I see:
Your enable and disable functions are never called for this portion of code
You use a possibly undeclared enabled variable, if so it never passes scopes between the handleClick and animation methods
You do not use any callback or await for invoke or updateCurrentBox, causing all the code after either to immediately run. As a result, enabled is never false, since it just instantly flips back to true. I’m not sure what library invoke is from, but there should be a callback or the function returns a Promise which can be awaited.
Rather than messing with the EventListener, wouldn’t it be easier to just throttle the function that it calls? You can find a bunch of articles online that will explain how to implement a throttle (and also a debouncer, which is similar, but not quite what you’re looking for; a throttle allows a function to be called immediately unless it’s already been called too recently, while a debouncer waits every time before calling the function and restarts the wait timer every time someone tried to call the function).
You are not logged in. However you can subscribe from another Fediverse account, for example Lemmy or Mastodon. To do this, paste the following into the search field of your instance: !programming@programming.dev
Welcome to the main community in programming.dev! Feel free to post anything relating to programming here!
Cross posting is strongly encouraged in the instance. If you feel your post or another person’s post makes sense in another community cross post into it.
Hope you enjoy the instance!
Rules
Rules
Follow the programming.dev instance rules
Keep content related to programming in some way
If you’re posting long videos try to add in some form of tldr for those who don’t want to watch videos
Just a heads up: if the spam is a problem, you also need to handle it server-side. Anything you do in JS is fencepost security, they’ll trivially get around it.
Similar to SaintWacko, it looks to me like your
invokeisn’t being allowed to complete before continuing. Your indenting in theanimationfunction threw me off, were you intending to have the following lines inside a callback or a.then()?I wonder if the update_current_box call is asynchronous. Since you’re not awaiting it, enabled would be set to true immediately, without waiting for whatever that function is doing to finish. Try putting a log statement right before enabled is set back to true. If I’m right, you’ll see that loud statement before the animation finishes.
You need a reference to your Eventhandler. So instead of just giving an anonymous callback function to your
addEventHandlerstore it in a variable instead. Then your can callremoveEventHandlerwith the same event type and the variable of your Eventhandler you want to remove.I have a dumb question… Are you declaring “enabled” somewhere outside of any of these functions?
For your own sanity, please use a formatter for your IDE. This will also help when others (and you) read the code, as indentation is a convenience for understanding program flow. From what I see:
enableanddisablefunctions are never called for this portion of codeenabledvariable, if so it never passes scopes between thehandleClickandanimationmethodsawaitforinvokeorupdateCurrentBox, causing all the code after either to immediately run. As a result,enabledis neverfalse, since it just instantly flips back totrue. I’m not sure what libraryinvokeis from, but there should be a callback or the function returns aPromisewhich can beawaited.Rather than messing with the EventListener, wouldn’t it be easier to just throttle the function that it calls? You can find a bunch of articles online that will explain how to implement a throttle (and also a debouncer, which is similar, but not quite what you’re looking for; a throttle allows a function to be called immediately unless it’s already been called too recently, while a debouncer waits every time before calling the function and restarts the wait timer every time someone tried to call the function).