Eloquent Javascript: DOM Animation snippet

Question

Я пытаюсь понять все, что происходит в этом примере небольшого кода в Eloquent Javascript: The Document Object Model (Chapter 13), но я не понимаю, где именно значение для «времени» передается в animate() перед тем, как сама функция передается в requestAnimationFrame(). Что именно мне здесь не хватает?

<p style="text-align: center"> 
    <img src="img/cat.png" style="position: relative"> 
</p> 

<script> 
    var cat = document.querySelector("img"); 
    var angle = 0, lastTime = null; 
    function animate(time) { 
    if (lastTime != null) 
     angle += (time - lastTime) * 0.001; 
    lastTime = time; 
    cat.style.top = (Math.sin(angle) * 20) + "px"; 
    cat.style.left = (Math.cos(angle) * 200) + "px"; 
    requestAnimationFrame(animate); 
    } 
    requestAnimationFrame(animate); 
</script> 

Answer 1

При выполнении этой строки: requestAnimationFrame(animate);, функция animate будет называться внутри requestAnimationFrame и получите time переменной, переданной в качестве аргумента. Нечто подобное (сужены и грубая):

function requestAnimationFrame(callback) { 
    var time = getTime(); 
    callback(time); //Where callback is your `animate` function 
}; 

Конечно, что requestAnimationFrame не смотрит на все как функции выше, но это только для иллюстрации, где time приходит.

Согласно документации:

Метод обратного вызова передается один аргумент, DOMHighResTimeStamp, который показывает текущее время, когда обратные вызовы ставятся в очередь requestAnimationFrame начинают стрелять. Несколько обратных вызовов в одном кадре , поэтому каждый получает одну и ту же метку времени, хотя время вычисления прошло при вычислении рабочей нагрузки предыдущего предыдущего обратного вызова . Эта временная метка представляет собой десятичное число в миллисекундах, но с минимальной точностью 1 мс (1000 мкс).

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Answer 2

Это не передается в заранее.

Линия function animate(time) { ничего не называют: вместо этого, он создает функция с именем animate, который принимает один аргумент называется time.

В спецификации для requestAnimationFrame указано, что обратный вызов всегда получает один аргумент, равный числу миллисекунд (или его фракций) с момента загрузки первой страницы. Таким образом, time не передается перед тем, как функция будет передана в requestAnimationFrame: вместо этого передается каждый раз requestAnimationFrame устанавливает свой вызов обратного вызова.