Question

I have a javascript function that when you mouse-over an image it changes that image’s id to one that has a keyframe animation so it flys around for 10 seconds then comes back to where it started. At that point you should be able to mouse-over again and it flys the same way.

My question is how can I make it ignore any more mouse-overs while it is flying around? I have something like this right now:

<script>
  function fly(element){
    element.id="flynow";
    setTimeout( function(){stopflying(element)}, 10000 );
  }

  function stopflying(element){ 
    element.id="";
  }
</script>

Answer 1

I wrote my own test functions for this, and while I didn’t use the same method of output as you, the onmouseover events should be the same.

All I did was make a global variable for storing a boolean value. This tells if you are mid-flight or not. I am assuming that you only want 1 element to fly at a time, right?

My code:

var isFlying = false;
function fly(element){
    if(!flying){
        flying=true;
        element.id="flynow";
        setTimeout(function(){stopflying(element)} , 10000);
    }
}

function stopflying(){
    flying=false;
    element.id="";
}

This should work to only allow 1 element to fly at a time, regardless of how many times onmouseover would have been called.