I have a checkbox on my site that, when clicked, stores whether or not a user checked the box in the WordPress user table. When the "checked" value is stored in the user table, the box background changes to the image of a check. However, since the process of storing this info in the user table takes ~3 seconds, I want to create a javascript function that immediately gives the user an indication that the box was clicked (instead of waiting for the check to appear). The < a > link that initiates this data transfer is located inside a div with the class "checkbox". General HTML layout:

<div class="checkbox">
  <a href="" class="wpc-button-complete wpc-complete">
  </a>
</div>

Right now I have a javascript function that changes the background color of the "checkbox" div on click, but just has a timeout that lasts long enough to cover the ~3 seconds of time for the data to be transferred and the check to appear:

document.querySelector('.checkbox').addEventListener('click', function (clicked) {
    return function () {
        if (!clicked) {
            this.style.backgroundColor = '#ce6480';
            clicked = true;
            setTimeout(function () {
                this.style.backgroundColor = '#f7f7f7';
                clicked = false;
            }.bind(this), 2500);
        }
    };
}(false), this);

The WP plugin that makes this data transfer possible changes the class of the checkbox < a > element from "wpc-button-complete wpc-complete" to "wpc-button-completed wpc-completed" when the "checked" value is stored in the user table and shows as such on the front end with the checkmark being present. I would rather have this function be so that the background color changes to "#ce6480" on click and then once the class of this element changes, the "#ce6480" background color goes away at the same time so the change in background color is only present during the short window between when the user clicks and when the check appears. Is there any way instead of the setTimeout function, I could just tell the function to wait for the class of the < a > element to change and then remove the changed background color?

Thanks.