我有一个 js 脚本，它应该禁用一个按钮，但它不起作用

Question

我有一个按钮可以让图像旋转 3 秒。我希望在旋转期间禁用该按钮。但这行不通。下面是创建旋转的 js 函数和 css 类。

   <script>
    function spin() {
      document.getElementById("spin_switch").disabled = true;
      document.getElementById("image-map").classList.toggle("spin");
      setTimeout(stop_spin, 3000);
      document.getElementById("spin_switch").disabled = false;
    }
    function stop_spin() {
      document.getElementById("image-map").classList.toggle("spin");
    }
   </script>
    
   <style>
    .spin {
      transform: rotate(360deg);
      webkit-transform: rotate(360deg);
      overflow: hidden;
      transition-duration: 3s;
      transition-property: transform;
    }
   </style>

Answer 1

你必须移动这条线

document.getElementById("spin_switch").disabled = false;

进入stop_spin函数：

function spin() {
   document.getElementById("spin_switch").disabled = true;
   document.getElementById("image-map").classList.toggle("spin");
   setTimeout(stop_spin, 3000);
}
function stop_spin() {
   document.getElementById("image-map").classList.toggle("spin");
   document.getElementById("spin_switch").disabled = false;
}

否则 spin_switch 将再次立即启用。 setTimeout 不会停止整个脚本。它只是在给定的超时时间到期后注册一个要执行的回调。