Question

我的图像上有一个onclick事件，该事件调用一个函数。现在，我不希望在函数继续运行时再次调用它。我该怎么办？

HTML：

<img
  class="rocket2"
  id="rocket2"
  ondblclick="myMove()"
  src="img/footerIcon.png"
/>

<div class="rocketEE" id="rocketEE">
  <span>
    <i class="fin-top"></i>
    <i class="fin-bottom"></i>
    <i class="faya"></i>
    <i class="wastes"><i></i><i></i><i></i><i></i><i></i></i>
  </span>
</div>

JavaScript：

<script>
  function myMove() {
    var elem = document.getElementById("rocketEE");
    var pos = -1100;
    var id = setInterval(frame, 1);
    function frame() {
      if (pos == 600) {
        clearInterval(id);
      } else {
        pos++;
        elem.style.left = pos + "px";
      }
    }
  }
</script>

谢谢！

Answer 1

全局变量是一种方法，但是您不应该养成对这样的事情使用全局变量的习惯。更好的方法是将该变量存储在使用范围内。元素本身是一个不错的地方：

function myMove() {
    var elem = document.getElementById("rocketEE");   
    if(elem.isAnimating)
        return;

    var pos = -1100;
    elem.isAnimating = true;
    var id = setInterval(frame, 1);
    function frame() {
        if (pos == 600) {
            clearInterval(id);
            elem.isAnimating = true;
        } else {
            pos++; 
            elem.style.left = pos + 'px'; 
        }
    }
}

只是一个旁注：这不是制作动画的好方法，因为一毫秒1毫秒的速率太快了，还有更好的方法-例如css and Animation API

等待功能完成，然后才能再次执行

1 个答案: