Javascript preventing double clicking of buttons doesn't work if page load time is higher than debounce timeout

[cjwood]

In button.js where the "data-prevent-double-click" attribute is used to identify buttons that should not allow double clicks, a timeout is set on such buttons so that they cannot be activated again within the timeout period. The hardcoded timeout period stored against DEBOUNCE_TIMEOUT_IN_SECONDS is 1.

On occasions where the request takes >1 second to return it is possible to click the button again and re-send the request as the 1s timeout has expired, this results in another 1s timeout being set. If for example the request takes 4s to return, it is possible to send the request at least 4 times: the first time the button is clicked, 1s after the first click, 2s after the first click, 3s after the first click.

The prevention of double clicks should function correctly regardless of request time.

[cjwood]

Our way of working around this has been to add an event listener to the form submit action disabling the form's buttons after the submission has completed to prevent further clicks. The button(s) become available again when the page refreshes.

[querkmachine]

I think this may be a misunderstanding of what the attribute is for: it's there to prevent duplicate submissions caused by a double click action — aka, clicking the left mouse button twice in rapid succession, as one might do on a desktop icon.

It isn't intended to prevent clicking a button more than once generally, as how that behaves may have to be different depending on the architecture of the service.