Multiple requests being made from a single click

There is a duplicate request issue that affects staff members at our company. I am unable to replicate it in our development environment (or in production for that matter, but I work from home so maybe it’s because there’s less traffic from my network? No clue). The site is a high traffic WordPress site but the issue is mainly with some custom plugin which uses JS and Vue. The site is served using Apache (could processes be the issue?).

The issue at hand is that occasionally, when using jQuery.ajax(...) there are multiple requests being created. I’ll attach a snippet of the code below:

<form>
    ...
    <a onclick="submit_form()" class="btn btn-primary float-right padding-lr-20">
        Process Payment
    </a>
</form>

<script>
function submit_form () {
    ...
    jQuery('#btn_process_payment').hide()
    jQuery.ajax({
        type: "POST",
        url,
        async: false,
        ...
    });
}
</script>

I’m aware that async: false is a bad idea so I am going to remove it but I see no reason why this would cause duplicates requests.

I would assume it was from double clicks but sometimes the duplicates are up to a 2 minutes apart and only rarely milliseconds apart. I added logs at the entry point of the file to gather data so I have millisecond accuracy with regard to request times in the PHP file. This has led me to believe it is a form submission issue, but the form isn’t being “submitted” in the traditional sense since it’s the action is being initiated by the onclick of the button (anchor element).

We tried to improve the server reliability. Sometimes there are timeouts (not for this feature in particular but overall) when there are heavy CRON jobs running. This didn’t help considering I still this issue in the logs.