function moveDivTimeBasedImprove(div, fps) { var left = 0; var current = +new Date; var previous = +new Date; var dt = 1000 / 60; var acc = 0; var param = 1; function loop() { var current = +new Date; var passed = current - previous; previous = current; acc += passed; while(acc >= dt) { update(dt); acc -= dt; } draw(); } function update (dt) { left += param * (dt * 0.12); if (left > 300) { left = 300; param = -1; } else if (left < 0) { left = 0; param = 1; } } function draw() { div.style.left = left + "px"; } setInterval(loop, 1000 / fps); } moveDivTimeBasedImprove(document.getElementById("div7"), 60); moveDivTimeBasedImprove(document.getElementById("div8"), 30); moveDivTimeBasedImprove(document.getElementById("div9"), 10);
<div class="title">60 fps:</div> <div class="div green" id="div7"></div> <div class="title">30 fps:</div> <div class="div red" id="div8"></div> <div class="title">10 fps:</div> <div class="div blue" id="div9"></div>
.div { width: 30px; height: 20px; position: relative; } .green { background-color: green; } .red { background-color: red; } .blue { background-color: blue; }