js запретить запуск функций | дать ему тайм-аут без первой задержки

Question

Я действительно запутался в этом. Поэтому я хочу добавить класс к элементу при наведении курсора на css и удалить его при наведении мыши. Но я хочу запретить добавлять и удалять функции на время перехода css. Например, у меня есть переход 1s, я хочу запустить функцию добавления при наведении, и в течение следующих 1 секунды функции добавления / удаления не могут быть вызваны. Как я могу это сделать?

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

Другими словами, я пытаюсь сделать парящий переход css, который не может быть прерван / остановлен / сброшен во время его работы. вот почему я пытаюсь использовать метод добавления класса вместо того, чтобы просто идти: hover.

Добавление setTimeout к вызову функции не помогает, поскольку не блокирует запуск другой функции и наоборот.

Если я добавлю async и создам await sleep функцию

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

Та же проблема. Я могу только приостановить функцию добавления, например. Но приостановка функции добавления не блокирует срабатывание функции удаления.

Но в то же время меня не волнует задержка удаления, поэтому я выбрал эту версию

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

Мой переход - .3s, поэтому я использовал немного большую задержку тайм-аута, и я установил дополнительную задержку перехода на mouseOut, чтобы предотвратить случайные ошибки, поэтому я не против задержки на функцию удаления.

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