如何每 x ms 移动一个元素？ [复制]答案

【问题标题】：How do I move an element every x ms? [duplicate]如何每 x ms 移动一个元素？ [复制]
【发布时间】：2017-05-27 12:03:02
【问题描述】：

我有一个元素，我想将其向右移动 200 像素，并且我希望它每 X 毫秒移动 px（如果可能的话）。

我当前的代码：

for ( var i = 0; i <= 200; i++) {
    startPos = 300;
    nextPos = startPos;
    document.getElementById('ball').style="position:absolute; right:" + nextPos + ";";
}

【问题讨论】：

搜索 setTimeout
Wouldn't move 200px to right需要你设置left CSS属性？

标签： javascript html

【解决方案1】：

您可以使用 requestAnimationFrame 或 setTimeout。

for ( var i = 0; i <= 200; i++) {
        startPos = 300;
        nextPos = startPos;
        document.getElementById('ball').style="position:absolute; right:" + nextPos + ";";
    }

设置超时：

var ball = document.getElementById('ball');
ball.style.position = 'absolute';

var interval = 10; // your X MS
var distance = 0;

var ticker = setInterval(moveBall, interval); // this function will run every 10ms till the clearInterval() is called.

function moveBall() {
    if(distance < 200) {
        distance++;
        ball.style.right = 300 + distance + "px";
    } 
    else {
        clearInterval(ticker);
    }

}

requestAnimationFrame：

var ball = document.getElementById('ball');
    ball.style.position = 'absolute';

    var distance = 0;

requestAnimationFrame(moveBall);

function moveBall() {
        if(distance < 200) {
            distance++;
            ball.style.right = 300 + distance + "px";
            requestAnimationFrame(moveball);
        } 
        else {
            cancelAnimationFrame(moveBall);
        }

    }

【讨论】：