如何防止JS动画重复执行？点击按钮动画二次异常解决

嗨，我明白你的困扰——动画第一次正常运行，第二次点击就出现闪烁异常，想让它只执行一次对吧？咱们先聊聊为啥你之前设置onclick为空没生效，再给你几个靠谱的解决方案～

为啥之前的方法没起作用？ #

你说在动画函数执行完后把按钮onclick设为空，但大概率是时机不对：如果你的动画是用CSS过渡（transition）或者关键帧（animation）实现的，这些都是异步执行的——函数执行完的时候，动画其实还在运行呢！这时候用户如果快速点击，还是能触发多次动画，导致闪烁。另外如果是用addEventListener绑定的事件，直接设onclick=null根本移除不掉绑定的监听函数，自然没用。

靠谱解决方案来了 #

方案1：用状态变量锁死触发权限 #

最灵活的方式，定义一个变量标记动画是否已经执行过，每次点击先检查这个状态：

// 全局/闭包里定义状态，初始为false表示没执行过
let hasRunAnimation = false;
const windowWidth = document.body.clientWidth;

function moveSidebar() {
  // 已经执行过？直接返回，啥也不做
  if (hasRunAnimation) return;
  // 标记为已执行，锁死
  hasRunAnimation = true;

  // 你的动画逻辑（这里假设侧边栏类名为sidebar）
  const sidebar = document.querySelector('.sidebar');
  // 加过渡动画
  sidebar.style.transition = 'transform 0.6s ease-out';
  // 移到视窗外
  sidebar.style.transform = `translateX(-${windowWidth}px)`;
}

// 绑定按钮点击事件
document.querySelector('#triggerBtn').onclick = moveSidebar;

方案2：正确移除事件监听器 #

如果你是用addEventListener绑定的点击事件，必须用removeEventListener来移除，而且要保证是同一个函数引用：

const windowWidth = document.body.clientWidth;
const triggerBtn = document.querySelector('#triggerBtn');

function moveSidebar() {
  const sidebar = document.querySelector('.sidebar');
  sidebar.style.transition = 'transform 0.6s ease-out';
  sidebar.style.transform = `translateX(-${windowWidth}px)`;

  // 监听过渡结束事件，完成后移除点击监听
  function onAnimationDone() {
    triggerBtn.removeEventListener('click', moveSidebar);
    sidebar.removeEventListener('transitionend', onAnimationDone);
  }

  sidebar.addEventListener('transitionend', onAnimationDone);
}

// 绑定点击事件
triggerBtn.addEventListener('click', moveSidebar);

方案3：直接禁用按钮（最简单粗暴） #

如果不需要保留按钮的其他功能，动画触发后直接把按钮禁用，用户连点击的机会都没有：

const windowWidth = document.body.clientWidth;
const triggerBtn = document.querySelector('#triggerBtn');

triggerBtn.onclick = function() {
  // 直接禁用按钮
  this.disabled = true;

  // 执行动画
  const sidebar = document.querySelector('.sidebar');
  sidebar.style.transition = 'transform 0.6s ease-out';
  sidebar.style.transform = `translateX(-${windowWidth}px)`;
};

额外提醒 #

如果你的动画是用CSS关键帧（@keyframes）实现的，记得监听animationend事件来做后续的状态锁定，而不是在函数开头就设置——要等动画真正跑完再锁死，避免中途触发的问题。

内容的提问来源于stack exchange，提问作者Václav Gregor