Q41. What is the difference between setTimeout(), setInterval(), and requestAnimationFrame()?

// setTimeout — একবার মাত্র
setTimeout(() => {
  console.log("২ সেকেন্ড পর একবার");
}, 2000);

// setInterval — বারবার
let count = 0;
const id = setInterval(() => {
  count++;
  console.log("প্রতি ১ সেকেন্ডে:", count);

  if (count === 3) {
    clearInterval(id); // থামাতে হলে অবশ্যই বন্ধ করতে হবে
  }
}, 1000);

// requestAnimationFrame — repaint অনুযায়ী
const box = document.getElementById("box");
let x = 0;

function animate() {
  x += 2;
  box.style.transform = `translateX(${x}px)`;

  if (x < 200) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

// খারাপ উদাহরণ — প্রতি টাইপে অপেক্ষা করা
function search() {
  const term = input.value;

  setTimeout(() => {
    const results = searchDatabase(term); // ধীর কাজ
    render(results);
  }, 300);
}

// ভালো উদাহরণ — কাজ শেষ হওয়ার পর পরেরটা শুরু
function search2() {
  const term = input.value;

  fetchResults(term).then((results) => {
    setTimeout(() => {
      render(results);
    }, 300);
  });
}

// 60fps হলে প্রতি ফ্রেমে 5px, মোট 20 ফ্রেম = প্রায় 333ms
let x = 0;

function move() {
  x += 5;
  element.style.transform = `translateX(${x}px)`;

  if (x < 100) requestAnimationFrame(move);
}

requestAnimationFrame(move);