Tengo una casilla de verificación en mi sitio que, cuando se hace clic, almacena si un usuario marcó o no la casilla en la tabla de usuarios de WordPress. Cuando el valor "marcado" se almacena en la tabla de usuario, el fondo del cuadro cambia a la imagen de un cheque. Sin embargo, dado que el proceso de almacenamiento de esta información en la tabla de usuario toma ~3 segundos, quiero crear una función de javascript que inmediatamente le brinde al usuario una indicación de que se hizo clic en el cuadro (en lugar de esperar a que aparezca la marca). El enlace < a > que inicia esta transferencia de datos se encuentra dentro de un div con la clase "casilla de verificación". Diseño HTML general:

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

En este momento tengo una función javascript que cambia el color de fondo del div de "casilla de verificación" al hacer clic, pero solo tiene un tiempo de espera que dura lo suficiente para cubrir los ~ 3 segundos de tiempo para que se transfieran los datos y aparezca la verificación:

 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);

El complemento de WP que hace posible esta transferencia de datos cambia la clase del elemento de casilla de verificación < a > de "wpc-button-complete wpc-complete" a "wpc-button-completed wpc-completed" cuando el valor "marcado" se almacena en la tabla de usuario y se muestra como tal en la parte frontal con la marca de verificación presente. Preferiría que esta función sea para que el color de fondo cambie a "#ce6480" al hacer clic y luego, una vez que cambie la clase de este elemento, el color de fondo "#ce6480" desaparezca al mismo tiempo, por lo que el cambio en el color de fondo es solo está presente durante la breve ventana entre cuando el usuario hace clic y cuando aparece el cheque. ¿Hay alguna forma en lugar de la función setTimeout, podría decirle a la función que espere a que cambie la clase del elemento < a > y luego elimine el color de fondo cambiado?

Gracias.