一定間隔で
イベントを
正確に
発生させる
スクリプト 現在時刻を元に、
正確に一定間隔のイベントを
発生するスクリプト

const raf = document.getElementById('some-element-you-want-to-animate');
let start, previousTimeStamp;
let done = false
let rafcount= 0;

function step(timestamp) {
	/* コールバックメソッドには、1 個の引数 DOMHighResTimeStamp が渡されます。これは現在の時刻を（time originからの経過ミリ秒数で）示します。 */
		console.log(`
raf: ${rafcount}
timestamp: ${timestamp}
		`);
	if (start === undefined) {
		start = timestamp;
	}
	const elapsed = timestamp - start;
	if (previousTimeStamp !== timestamp) {
		// ここで Math.min() を使用して、要素がちょうど 200px で止まるようにします。
		const count = Math.min(0.1 * elapsed, 200);
		raf.style.transform = `translateX(${count}px)`;
		if (count === 200) done = true;
	}
	if (elapsed < 2000) { // Stop the animation after 2 seconds
		rafcount++;
		previousTimeStamp = timestamp;
		if (!done) {
			window.requestAnimationFrame(step);raf.textContent= rafcount;
		}
	}else{
		raf.textContent= rafcount;
	}
}

window.requestAnimationFrame(step);

const raf = document.getElementById('some-element-you-want-to-animate');
const start = Date.now();
let count= 0;
const timer= setInterval(() => {
  count++;
  const s = Math.floor((Date.now() - start)*1000/ 1000);
	raf.textContent= count;
	if(2000 >= s){
		raf.style.transform += `translateX(1px)`;
		console.log(`
		count: ${count}
		time: ${s }
		`);
	}else{clearInterval(timer);}
}, 1000/60);