Установка таймеров

Функция setTimeout схожа с requestAnimationFrame. Она планирует запуск другой функции в будущем. Но вместо вызова функции при следующей перерисовке страницы, она ждёт заданное в миллисекундах время. Эта страница через две секунды превращается из синей в жёлтую:

<script>

  document.body.style.background = "blue";

  setTimeout(function() {

    document.body.style.background = "yellow";

  }, 2000);

</script>

Иногда вам надо отменить запланированную функцию. Это можно сделать, сохранив значение, возвращаемое setTimeout, и затем вызвав с ним clearTimeout.

var bombTimer = setTimeout(function() {

  console.log("BOOM!");

}, 500);

if (Math.random() < 0.5) { // 50% chance

  console.log("Defused.");

  clearTimeout(bombTimer);

}

Функция cancelAnimationFrame работает так же, как clearTimeout – вызов её со значением, возвращённым requestAnimationFrame, отменит этот кадр (если он уже не был вызван).

Похожий набор функций, setInterval и clearInterval используется для установки таймеров, которые будут повторяться каждые X миллисекунд.

var ticks = 0;

var clock = setInterval(function() {

  console.log("tick", ticks++);

  if (ticks == 10) {

    clearInterval(clock);

    console.log("stop.");

  }

}, 200);