js 禁止来自运行的函数 |立即暂停

Question

我对这个真的很困惑。所以我想在悬停时添加一个 class 到带有一些 css 垃圾的元素，并在鼠标移开时将其删除。但我想在 css 过渡期间禁止添加和删除功能。例如，我有 1s 转换，我想运行在悬停时添加功能，并且在接下来的 1 秒内无法调用 add/remove 功能。我该怎么做？

<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 过渡，但在运行时不能 interruped/stopped/reset。这就是为什么我尝试使用添加 class 方法而不是仅仅使用 :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

我的转换是 0.3 秒，所以我有更大的超时延迟，我确实在 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');
    }

js 禁止来自运行的函数 |立即暂停

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

javascript

css

transition

js 禁止来自 运行 的函数 |立即暂停

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

javascript

css

transition

js 禁止来自运行的函数 |立即暂停