js forbid functions from running | give it a timeout without first delay

Question

Im really confused on this one. So i want to add a class to element on hover with some css junk, and remove it on mouseout. But i want to forbid the add and remove functions for the duration of css transition. For instance, i have 1s transition, i want to run add function on hover, and for the next 1 second add/remove functions cant be called. How could i do that ?

<div class="registration" onmouseover="addReg()" onmouseout="removeReg()">

const registration=document.querySelector('.registration');
const registrationInner=document.querySelector('.registration-inner');

function addReg(){
  registration.classList.add('registration-hover');
  registrationInner.classList.add('inner-hover');

}
function removeReg(){
  registration.classList.remove('registration-hover');
  registrationInner.classList.remove('inner-hover');
}

In other words, im trying to make a hover css transition which can not be interruped/stopped/reset while its running. which's why im trying to use the adding class method instead of just going for :hover.

Adding setTimeout to a function call doesnt help, since it doesnt block the other function from starting and the other way around.

If i add async and create an await sleep function

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

Same issue. I can only pause the add function for instance. But me pausing the add function doesnt block the remove function from being triggered.

But at the same time i kinda dont care about the removing delay, so i've went with this version

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

registration=document.querySelector('.registration');
registrationInner=document.querySelector('.registration-inner');

async function addReg(){
  registration.classList.add('registration-hover');
  registrationInner.classList.add('inner-hover');
  await sleep(350);

}

async function removeReg(){
  await sleep(350);
  registration.classList.remove('registration-hover');
  registrationInner.classList.remove('inner-hover');
}

Answer 1

My transition is .3s, so i've went with a bit bigger timeout delay, and i did set up additional transition-delay on mouseOut to prevent accidental errors, so i dont mind the delay on remove function.

function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }

    registration=document.querySelector('.registration');
    registrationInner=document.querySelector('.registration-inner');

    async function addReg(){
      registration.classList.add('registration-hover');
      registrationInner.classList.add('inner-hover');
      await sleep(300);

    }

    async function removeReg(){
      await sleep(400);
      registration.classList.remove('registration-hover');
      registrationInner.classList.remove('inner-hover');
    }