setTimeout - garevna/js-course GitHub Wiki

Метод setTimeout объекта window принимает два аргумента:

• функцию обратного вызова ( callback )
• длительность интервала задержки ( в милисекундах )

Функция, переденная в качестве первого аргумента, будет вызвана через указанный вторым аргументом интервал

^{⚠️ Таймеры игнорируют происходящее в браузере
Даже когда страница находится в неактивной вкладке браузера, они будут использовать ресурсы процессора
⚠️ Браузер выполняет перерисовку ( рендер ) страницы обычно с частотой 60 fps ( frame per second )
Частота, с которой будет работать таймер, скорее всего, не будет коррелировать с частотой обновления страницы браузером
ПРи}

( function() {

    console.log ( 'START' )

    setTimeout (
        function () {
            console.log( 'Прошла 1 секунда' )
        },
        1000
    )

    console.log ( 'END' )

})()

Сначала в консоль будут выведены сообщения 'START' и 'END',

а затем, примерно через секунду - сообщение 'Прошла 1 секунда'

Однако это не означает, что если передать нулевое значение методу setTimeout, то вызов коллбэк-функции произойдет немедленно

(function() {

    console.log ( 'START')

    setTimeout (
        function () {
            console.log( '1' )
    })

    console.log ( '2' )

    setTimeout (
        function () {
            console.log( '3' )
    }, 0 )

    console.log ( 'END' )

})()

START
2
END
( основной поток завершил работу,
стек вызовов пуст )
1
3

Почему так происходит?

Event Loop

requestAnimationFrame - метод объекта window

В качестве аргумента получает колбэк-функцию, которая будет вызвана перед следующей перерисовкой браузером страницы

let showTime = function () {
  document.body.innerHTML = `<h3>${Date.now()}</h3>`
  requestAnimationFrame ( showTime )
}

showTime()

Возвращает целое число, являющееся уникальным идентификатором ( ссылкой ) для callback-функции

let showTime = function () {
  document.body.innerHTML = `<h3>${Date.now()}</h3>`
}

console.log ( requestAnimationFrame ( showTime ) )

Браузеры осуществляют перерисовку страницы с частотой ~ 60fps ( frames per second - кадров в секунду ) Именно с этой частотой будет вызываться колбэк-функция, что позволяет избежать "дребезга" ( debouncing )

Следующее live demo наглядно демонстрирует, что использование requestAnimationFrame обеспечивает более "гладкую" анимацию, чем анимация с помощью таймеров, поскольку частота изменения координат объекта согласована с частотой обновления ( перерисовки ) страницы браузром

☕ Live Demo