js 禁止函数运行 |立即给它一个超时时间答案

【问题标题】：js forbid functions from running | give it a timeout without first delayjs 禁止函数运行 |立即给它一个超时时间
【发布时间】：2020-04-23 19:20:06
【问题描述】：

我真的对这个感到困惑。所以我想用一些css垃圾在悬停时向元素添加一个类，并在鼠标移出时将其删除。但我想在 css 过渡期间禁止添加和删除功能。例如，我有 1 秒的过渡，我想在悬停时运行添加功能，并且在接下来的 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');
}

【问题讨论】：

await sleep(duration) stackoverflow.com/questions/951021/…

标签： javascript css transition

【解决方案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');
    }

【讨论】：