Вопросы новичка
Участников: 4
Страница 1 из 8
Страница 1 из 8 • 1, 2, 3, 4, 5, 6, 7, 8
Вопросы новичка
- Код:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x=10,
y=10;
function drawRect (){
context.fillStyle = 'black'; //цвет для рисования
context.clearRect(10,10,300,50);//очистка экрана
context.fillRect(x,y,50,50); // рисование квадрата
}
var nextGameStep = function (){
requestAnimationFrame (gameLoop);
};
var gameLoop = function(){
drawRect();
x+=5;
nextGameStep(gameLoop);
};
gameLoop();
Как это работает? Сначала запускается gameLoop(); который запускает функцию var gameLoop = function(){, эта функция запускает функцию drawRect(); которая запускает function drawRect (){ в которой установлен чёрный цвет рисования , стираем всё с экрана, рисуем чёрный квадрат...дальше как код отрабатывает?
В какой момент мы переходим к x+=5; для смещения нашего квадрата по оси х ?
И самое главное, что делает строка nextGameStep(gameLoop);? Я так понимаю, что происходит запуск функции nextGameStep, а аргумент у неё функция gameLoop и вот эти передачи функции с функцией внутри я не понимаю.
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Вопросы новичка
В какой момент мы переходим к x+=5; для смещения нашего квадрата по оси х ?
после отрисовки квадрата переменная х приращивается на 5 и когда в следующий раз ты вызываешь drawRect(), квадрат будет рисоваться уже с этим новым значением х
что делает строка nextGameStep(gameLoop);
она вызывает функцию requestAnimationFrame (gameLoop)
Re: Вопросы новичка
Ок, с увеличением х я понял.
про nextGameStep(gameLoop); не понимаю...как это функция с аргументом в виде другой функции, какая ж функция должна выполняться
до этого я правильно описал хронологию событий?
про nextGameStep(gameLoop); не понимаю...как это функция с аргументом в виде другой функции, какая ж функция должна выполняться
до этого я правильно описал хронологию событий?
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Вопросы новичка
Строго говоря, gameLoop это ссылка на функцию
Тебе надо проделать в браузере следующий код и посмотреть результат, чтобы прочувствовать разницу:
- Код:
function(){
drawRect();
x+=5;
nextGameStep(gameLoop);
};
Тебе надо проделать в браузере следующий код и посмотреть результат, чтобы прочувствовать разницу:
- Код:
function myFunc (){
var x = 0;
x +=10;
return x;
}
console.log( myFunc );
console.log( myFunc() );
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Вопросы новичка
строго говоря в твоем коде nextGameStep(gameLoop) делает тоже, что делало бы nextGameStep() потому как функция у тебя описана как
а вот например функция requestAnimationFrame (gameLoop) вызывает gameLoop в качестве каллбэка
https://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-requestanimationframe
- Код:
var nextGameStep = function (){
//
};
- Код:
var nextGameStep = function (gameLoop){
//
};
а вот например функция requestAnimationFrame (gameLoop) вызывает gameLoop в качестве каллбэка
https://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-requestanimationframe
Re: Вопросы новичка
raingo пишет:Строго говоря, gameLoop это ссылка на функцию
- Код:
function(){
drawRect();
x+=5;
nextGameStep(gameLoop);
};
Тебе надо проделать в браузере следующий код и посмотреть результат, чтобы прочувствовать разницу:Проделай обязательно, чутка понятнее станет с коллбеками.
- Код:
function myFunc (){
var x = 0;
x +=10;
return x;
}
console.log( myFunc );
console.log( myFunc() );
это всё понятно. Здесь одна команда вывода в консоль вызывает содержимое функции, а вторая команда вывода в консоль вызывает выполнение функции и выводит результат 10
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Вопросы новичка
Pyro338 пишет:строго говоря в твоем коде nextGameStep(gameLoop) делает тоже, что делало бы nextGameStep()
Без gameLoop пишет 1.js:31 Uncaught TypeError: Failed to execute 'requestAnimationFrame' on 'Window': 1 argument required, but only 0 present.
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Вопросы новичка
Вот так будет проще для понимания
requestAnimationFrame(коллбек) - получает в коллбеке ссылку на функцию. И выполняет эту функцию. Грубо говоря вот эта часть - это вызов функции самой себя бесконечно:
- Код:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x=10,
y=10;
var gameLoop = function(){
context.fillStyle = 'black'; //цвет для рисования
context.clearRect(10,10,300,50);//очистка экрана
context.fillRect(x,y,50,50); // рисование квадрата
x+=5;
requestAnimationFrame(gameLoop);
};
gameLoop();
requestAnimationFrame(коллбек) - получает в коллбеке ссылку на функцию. И выполняет эту функцию. Грубо говоря вот эта часть - это вызов функции самой себя бесконечно:
- Код:
var gameLoop = function(){
//...
requestAnimationFrame(gameLoop);
};
gameLoop();
Последний раз редактировалось: raingo (Чт Дек 28, 2017 10:51 pm), всего редактировалось 2 раз(а)
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Вопросы новичка
а ну значит ты передаешь gameLoop в nextGameStep ради того, чтобы передать его в requestAnimationFrame
Re: Вопросы новичка
Для понимания коллбеков можно еще порассуждать:
- Код:
var x = 0;
function test(){
x++;
console.log(x);
}
function loop (callback){ //здесь callback - это объект
callback(); //здесь callback() - это выполнение
}
loop(test);
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Вопросы новичка
- Спойлер:
- Кстати, угадайте, что покажет в консоле следующий код:
- Код:
var xy = 0;
var loop = function (callback){
xy++;
console.log(xy);
callback();
};
loop(loop );
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Вопросы новичка
raingo пишет:Для понимания коллбеков можно еще порассуждать:
- Код:
var x = 0;
function test(){
x++;
console.log(x);
}
function loop (callback){ //здесь callback - это объект
callback(); //здесь callback() - это выполнение
}
loop(test);
К чёрту мою функцию, объясни по шагам как твоя работает. Начинается всё с loop(test); Это ссылка для запуска функции loop, которая получает параметр test ? И какой test : просто test или этот
- Код:
function test(){
x++;
console.log(x);
}
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Вопросы новичка
Это легко объяснимо. Моя функция в конце имеет return x;реальная херня какая-та, твой console.log( myFunc() ); отрабатывает нормально
и я вижу всё содержимое функции а console.log( drawRect () ); пишет underfined Почему??
myFunc() - это выполнение функции. На самом деле в консоле мы выводим значение x. А т.к. drawRect () ничего не возвращает, то и выдает ошибку.
loop() это не ссылка. Это выполнение функции. Везде, где функция пишется со скобками - это вот чисто функция.К чёрту мою функцию, объясни по шагам как твоя работает. Начинается всё с loop(test); Это ссылка для запуска функции loop, которая получает параметр test ? И какой test : просто test или этот
бле, я тебя запутал. "Ссылка" это test. Давай вместо слова "ссылка" произносить слово "объект".
Вообще по сути любая переменная, объект и функция - это ссылка в памяти на написанный нами код. "x" - это тоже ссылка. Когда мы пишем что-либо без скобок, программа понимает, что мы имеем ввиду объект. И берет из памяти нужный кусок кода(объект). Когда мы пишем что-то со скобками, программа понимает, что нужно выполнить код.
У нас loop() везде со скобками. А test в одном месте это объект, а в другом месте это функция.
Гм.. пожалуй приведу вот этот код:
- Код:
var x = 10; //это описание объекта
function myFunc(){ //это описание функции
x += 3;
return x;
}
myFunc(); //это выполнение функции, x=10+3
//myFunc; //это просто объект, который ничего не делает и скорее всего вызовет ошибку
console.log(myFunc); //здесь программа достанет объект: function (){ x += 3;return x;}
console.log(x); //здесь программа достанет объект: 13
Немного изменю код, чтобы было понятнее:
- Код:
function test(){
console.log("!");
}
function loop (callback){ //здесь будет test
callback(); //здесь будет function test(){ console.log("!");} или ошибка
}
loop(test);
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Вопросы новичка
Вначале вызывается loop(test);, которая вызывает test(); там, где написано callback();
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Вопросы новичка
raingo пишет:Это легко объяснимо. Моя функция в конце имеет return x;реальная херня какая-та, твой console.log( myFunc() ); отрабатывает нормально
и я вижу всё содержимое функции а console.log( drawRect () ); пишет underfined Почему??
myFunc() - это выполнение функции. На самом деле в консоле мы выводим значение x. А т.к. drawRect () ничего не возвращает, то и выдает ошибку.
это я уже протупил со скобками...надо было мне написать , что console.log( myFunc ); возвращает содержимое функции а не console.log( myFunc() );
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Вопросы новичка
raingo пишет:Это легко объяснимо. Моя функция в конце имеет return x;реальная херня какая-та, твой console.log( myFunc() ); отрабатывает нормально
и я вижу всё содержимое функции а console.log( drawRect () ); пишет underfined Почему??
myFunc() - это выполнение функции. На самом деле в консоле мы выводим значение x. А т.к. drawRect () ничего не возвращает, то и выдает ошибку.loop() это не ссылка. Это выполнение функции. Везде, где функция пишется со скобками - это вот чисто функция.К чёрту мою функцию, объясни по шагам как твоя работает. Начинается всё с loop(test); Это ссылка для запуска функции loop, которая получает параметр test ? И какой test : просто test или этот
бле, я тебя запутал. "Ссылка" это test. Давай вместо слова "ссылка" произносить слово "объект".
Вообще по сути любая переменная, объект и функция - это ссылка в памяти на написанный нами код. "x" - это тоже ссылка. Когда мы пишем что-либо без скобок, программа понимает, что мы имеем ввиду объект. И берет из памяти нужный кусок кода(объект). Когда мы пишем что-то со скобками, программа понимает, что нужно выполнить код.
У нас loop() везде со скобками. А test в одном месте это объект, а в другом месте это функция.
Гм.. пожалуй приведу вот этот код:
- Код:
var x = 10; //это описание объекта
function myFunc(){ //это описание функции
x += 3;
return x;
}
myFunc(); //это выполнение функции, x=10+3
//myFunc; //это просто объект, который ничего не делает и скорее всего вызовет ошибку
console.log(myFunc); //здесь программа достанет объект: function (){ x += 3;return x;}
console.log(x); //здесь программа достанет объект: 13
вот это супер пояснение, более чем тема закрыта по этому вопросу
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Вопросы новичка
raingo пишет:
Немного изменю код, чтобы было понятнее:Смотри, callback - это описание программе, что тут должен быть другой код. Программа не знает заранее какой. Если мы выполним loop(x); то произойдет ошибка. Т.к. x - это число, а не функция. Но test - это функция.
- Код:
function test(){
console.log("!");
}
function loop (callback){ //здесь будет test
callback(); //здесь будет function test(){ console.log("!");} или ошибка
}
loop(test);
Я понял как он работает, callback тут вообще ни на что не влияет, можно вообще написать
- Код:
function test(){
console.log("works");
}
function loop (dessan){ //здесь аргумент функции dessan изменится на объект test
dessan(); //здесь функция dessan() примет значение test и станет функцией test(), которая выполнит код выше
}
loop(test); // означает ищи функцию loop замени её аргумент на объект test и выполни
Последний раз редактировалось: Dessan (Пт Дек 29, 2017 4:15 am), всего редактировалось 1 раз(а)
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Вопросы новичка
raingo пишет:Кстати, угадайте, что покажет в консоле следующий код:
- Код:
var xy = 0;
var loop = function (callback){
xy++;
console.log(xy);
callback();
};
loop(loop );
А эта функция выдаёт ошибку и чтоб она работала бесконечно нужно добавить аргумент
- Код:
var xy = 0;
var loop = function (callback){
xy++;
console.log(xy);
callback(loop); //вместо callback();
};
loop(loop);
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Вопросы новичка
ну вот, разобрался
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Вопросы новичка
Вот только сейчас разобрался с вашими "калбэками" прочитав статью от пайро. На том сайте написано:
Callback - любой уникальный идентификатор(аргумент) вызова функции отличный от пустого значения (нуля).Сам метод requestAnimationFrame используется для единоразового отображения анимации(кадра анимации), для последующего обращения к анимации эту функцию нужно вызывать снова путём обращения к её идентификатору. Множественные вызовы функции с одинаковым идентификатором влекут наложение кадров анимации друг на друга.
То есть метод requestAnimationFrame всегда нуждается в идентификаторе(аргументе) иначе вызывает ошибку Uncaught TypeError: Failed to execute 'requestAnimationFrame' on 'Window': 1 argument required, but only 0 present.
Я всё верно понял?
Callback - любой уникальный идентификатор(аргумент) вызова функции отличный от пустого значения (нуля).Сам метод requestAnimationFrame используется для единоразового отображения анимации(кадра анимации), для последующего обращения к анимации эту функцию нужно вызывать снова путём обращения к её идентификатору. Множественные вызовы функции с одинаковым идентификатором влекут наложение кадров анимации друг на друга.
То есть метод requestAnimationFrame всегда нуждается в идентификаторе(аргументе) иначе вызывает ошибку Uncaught TypeError: Failed to execute 'requestAnimationFrame' on 'Window': 1 argument required, but only 0 present.
Я всё верно понял?
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Вопросы новичка
ХЗ, я ничего из написанного не понял=)Я всё верно понял?
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Вопросы новичка
Для меня колбек - это вызов одной функции из другой.
В это примере мы из функции loop() вызываем функцию test()
dessan по сути не существует, это приказ программе подставить вместо дессана что-то другое и сотворить с этим другим то, что мы указываем в коде. В данном случае выполнить функцию test().
Т.е. test() - это коллбек.
В это примере мы из функции loop() вызываем функцию test()
dessan по сути не существует, это приказ программе подставить вместо дессана что-то другое и сотворить с этим другим то, что мы указываем в коде. В данном случае выполнить функцию test().
Т.е. test() - это коллбек.
- Код:
function test(){
console.log("works");
}
function loop (dessan){
dessan();
}
loop(test);
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Вопросы новичка
ок, спасибо.
Есть ещё примеры с множественными вызовами функций из функций?
Есть ещё примеры с множественными вызовами функций из функций?
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Re: Вопросы новичка
Немного недоработал. Чутка правильнее будет так:Дессан пишет:А эта функция выдаёт ошибку и чтоб она работала бесконечно нужно добавить аргумент};
- Код:
var xy = 0;
var loop = function (callback){
xy++;
console.log(xy);
callback(loop); //вместо callback();
loop(loop);
- Код:
var xy = 0;
var loop = function (callback){
xy++;
console.log(xy);
callback(callback); //у тебя тут loop;
};
//бесконечный цикл
loop(loop );
Множественные вызовы, это из другой оперы. Это ты наверно из jquery нахватался:
- Код:
function turn(mytext){
console.log(mytext); //для первого вызова
return function m(mytext){
console.log(mytext);
return m;
};
}
turn("Первый вызов")("Второй вызов")("Третий вызов")("Четвертый вызов");
Давно ничего нового не узнавал по программированию. Счастье.
raingo- Отдел прокрастинации
- Сообщения : 756
Дата регистрации : 2017-12-25
Re: Вопросы новичка
нет, всё отсюда https://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-requestanimationframe
про
про
- Код:
callback(callback); //у тебя тут loop;
Dessan- Юный падаван
- Сообщения : 426
Дата регистрации : 2017-12-25
Страница 1 из 8 • 1, 2, 3, 4, 5, 6, 7, 8
Страница 1 из 8
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
|
|