var box = document.getElementById('box'),
boxPos = 10,
boxVelocity = 0.08,
limit = 300,
lastFrameTimeMs = 0,
maxFPS = 60,
delta = 0,
timestep = 1000 / 60;
function update(delta) {
boxPos += boxVelocity * delta;
// Switch directions if we go too far
if (boxPos >= limit || boxPos <= 0) boxVelocity = -boxVelocity;
}
function draw() {
box.style.left = boxPos + 'px';
}
function mainLoop(timestamp) {
// Throttle the frame rate.
if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) {
requestAnimationFrame(mainLoop);
return;
}
delta += timestamp - lastFrameTimeMs;
lastFrameTimeMs = timestamp;
while (delta >= timestep) {
update(timestep);
delta -= timestep;
}
draw();
requestAnimationFrame(mainLoop);
}
requestAnimationFrame(mainLoop);
<div id="box" style="position: absolute; top: 10px; left: 10px; height: 50px; width: 50px; background-color: red;"></div>