如何让函数执行完毕后再允许再次调用？

你的代码里犯了个关键错误，导致没法阻止重复触发：把赋值操作写成了比较操作。你用了x == 0和x == 1，这只是在判断值是否相等，根本没改变x的实际值。所以不管点多少次，x始终是1，每次都会执行第一个分支的逻辑。

修复后的代码 #

JavaScript #

var x = 1;

function test() {
  if (x === 1) { // 用严格相等更严谨
    x = 0; // 改成赋值，锁定状态
    document.getElementById("test").innerHTML = "I was clicked.";
    setTimeout(() => {
      x = 1; // 动画结束后解锁
    }, 5000);
  } else {
    document.getElementById("test").innerHTML = "You already clicked me!";
  }
}

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p onclick="test()" id="test">click me</p>
  <script src="test.js"></script>
</body>
</html>

通用解决方案思路 #

在动画场景里，这种状态锁的方式是通用的：

• 提前定义一个状态变量（比如isAnimating）
• 触发动画前先检查这个变量，只有当它为false时才启动动画，同时把变量设为true
• 动画完成（或定时器、过渡结束回调）时，再把变量设回false
• 这样就能彻底避免动画未结束时被重复触发，防止动画叠加导致的页面混乱

内容的提问来源于stack exchange，提问作者graham4765