Почему этот код работает?
Вот какая я думаю, почему он работает:
1) Переменные все сохраняются и срабатывает вызов функции gameEngineStart(gameLoopRight)
2) Выполняются тело функции gameEngineStart
->
gameEngine
= телу функции gameLoopRight
, потом срабытывает вызов функции gameEngineStep()
3) Выполняется функция gameEngineStep
->
вызывается reqAnimFrame(gameEngineStep)
, reqAnimFrame
становится ссылкой на функцию requestAnimationFrame
, если всё хорошо, иначе возвращается название функции для нужного браузера, а потом уже обычный setTimeout
reqAnimFrame
вызывается с аргументом gameEngineStep
, который должен был вызвать саму себя(по логике) и так бесконечно. Но дальше происходит срабатывание gameEngine()
Дальше всё понятно как работает, но вот этот момент непонятен, почему функция не вызывает саму себя бесконечно, а может выполнить вызов gameEngine()
?
var gameEngine;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 10, y = 10;
function drawRect() {
context.fillStyle = 'black';
context.clearRect(0, 0, 300, 300);
context.fillRect(x, y, 50, 50);
}
var reqAnimFrame = (function() {
return requestAnimationFrame ||
mozRequestAnimationFrame ||
webkitRequestAnimationFrame ||
oRequestAnimationFrame ||
msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
}
})();
function gameEngineStart(callback) {
gameEngine = callback;
gameEngineStep();
}
function gameEngineStep() {
reqAnimFrame(gameEngineStep);
gameEngine();
}
function setGameEngine(callback) {
gameEngine = callback;
}
function gameLoopRight() {
drawRect();
x += 2;
if (x >= 240) {
setGameEngine(gameLoopLeft);
}
}
function gameLoopLeft() {
drawRect();
x -= 2;
if (x < 20) {
setGameEngine(gameLoopRight);
}
}
gameEngineStart(gameLoopRight);
#canvas {
border: 1px solid black;
}
<canvas id="canvas" width="300px" height="70px"></canvas>