How do I prevent loop that moves character to run twice? (Javascript)

Question

I managed to make a simple loop to move my character, onmousedown I move the character diagonally to where the user clicked. It's working but my problem is that I don't know how to prevent more loops to start over the first if the user clicks more than once.

Right now if you click more than once the character moves faster and faster since more loops are running at the same time.

This is the loop:

(function move() {
    if(cframes<frames) {
    cframes = cframes+1;
        character.style.left=parseInt(character.style.left)+pxsecx;
        character.style.top=parseInt(character.style.top)+pxsecy;
        setTimeout(move, 20);
}
})()
}

How do I prevent this loop from starting if it already has? or stop it and start another? Thanks

Answer 1

One way of solving it is to not call the move function when clicking but only set the desired destination where you want to move the character (and trigger a main loop if it's for some reason not already running) and let the main loop move the character towards the destination.

See tips for writing the game loop question and this StackOverflow question titled best way for simple game-loop in Javascript.

Answer 2

setTimeout() returns a timer ID that can be passed to clearTimeout() later to cancel it. Store it in a variable somewhere and cancel the old one in the event callback. See https://developer.mozilla.org/en/window.setTimeout for more details.

Answer 3

Do not allow click() handler to cause movement until some time passes

Basically do not allow clicking faster than some value and allow it only once at the same time. :)

There is how You can do it:

Create global variable:

var not_yet; // it represents delay
// * when someone clicks it is set to nonzero
// * timer will decrease it until zero
// * if it is zero, then it will wait for user click
// * if it is zero and user clicks, then character is moved and it is set to nozero

Add a timer, which You will call each few miliseconds, and which will do this:

if (0 < not_yet) { 
// it is a clock which is decreasing since the previous click
// this way together with this (1) check You prevent from
    not_yet -= 1;
}

In handler of the click event :

if (0 < not_yet) { // (1)
    return; 
// user clicked few milliseconds ago
// it is not right time yet
} else {
    // do whatever You did there previously

    not_yet = 5; // start the timer and set it to delay for 5* units 
    // *5 is arbitrary, set it to whatever value will work the best for You
}