如何停止动画

Question

I am rather new to programming and have just begun learning Javascript. I creating a personal portfolio in which I want an image of myself to slide horizontally from one end of the screen the other end. I have the code that gets it to slide right horizontally, but I do no know how to stop it.

My code looks like this at the moment:

var move = null;

function doMove() {
    move.style.left = parseInt(move.style.left) + 2 + 'px';
    setTimeout(doMove);
}
function init() {
    move = document.getElementById("myimge");
    move.style.left = "0px";
    doMove();
}
window.onload = init;

I think I am supposed to write an if statement and call on the clearTimeout function to stop the animation, but I cant figure out the code. Any assistance would be great.

Answer 1

The key is that you're calling doMove() recursively, using setTimeout() to displace the element at a framerate that is perceptible to the human eye. To stop a recursive function, introduce a condition to terminate it, like so:

var move = null;
var body_width = document.body.clientWidth;

function doMove() {
    var rect = move.getBoundingClientRect();

    // end recursion when the element's displacement to the right matches the width of the body element containing it
    if(rect.right >= body_width) {
      return;
    }

    move.style.left = parseInt(move.style.left) + 2 + 'px';
    setTimeout(doMove); // could also use requestAnimationFrame(doMove);
}

function init() {
    move = document.getElementById("myimage");
    move.style.left = "0px";
    doMove();
}

window.onload = init;

Demo

---

Consider using CSS transforms instead of modifying left / right properties, as transforms are better optimised and will yield a better frame rate.

It is also recommended to use requestAnimationFrame instead of setTimeout . Fortunately, it works in much the same way for your use case.

Optimised demo

---

You could also just use CSS and nothing else. You could handle the animation using CSS transitions or CSS keyframe animation.

CSS-based Demo

Answer 2

Add terminate condition in the doMove function

function doMove() {
    move.style.left = parseInt(move.style.left) + 2 + 'px';

    if(terminateConditionFullfiled)
        return;

    setTimeout(doMove);
}