Вопросы новичка

Страница 1 из 8 1, 2, 3, 4, 5, 6, 7, 8  Следующий

Перейти вниз

Вопросы новичка

Сообщение автор Dessan в Чт Дек 28, 2017 9:54 pm

Код:

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: Вопросы новичка

Сообщение автор Pyro338 в Чт Дек 28, 2017 10:14 pm

В какой момент мы переходим к x+=5; для смещения нашего квадрата по оси х ?

после отрисовки квадрата переменная х приращивается на 5 и когда в следующий раз ты вызываешь drawRect(), квадрат будет рисоваться уже с этим новым значением х

что делает строка nextGameStep(gameLoop);

она вызывает функцию requestAnimationFrame (gameLoop)
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 32
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор Dessan в Чт Дек 28, 2017 10:24 pm

Ок, с увеличением х я понял.

про nextGameStep(gameLoop); не понимаю...как это функция с аргументом в виде другой функции, какая ж функция должна выполняться

до этого я правильно описал хронологию событий?

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор raingo в Чт Дек 28, 2017 10:33 pm

Строго говоря, 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: Вопросы новичка

Сообщение автор Pyro338 в Чт Дек 28, 2017 10:38 pm

строго говоря в твоем коде nextGameStep(gameLoop) делает тоже, что делало бы nextGameStep() потому как функция у тебя описана как

Код:
var nextGameStep = function (){     
  //
    };
а не

Код:
var nextGameStep = function (gameLoop){     
  //
    };

а вот например функция requestAnimationFrame (gameLoop) вызывает gameLoop в качестве каллбэка

https://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-requestanimationframe
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 32
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор Dessan в Чт Дек 28, 2017 10:43 pm

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: Вопросы новичка

Сообщение автор Dessan в Чт Дек 28, 2017 10:47 pm

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: Вопросы новичка

Сообщение автор raingo в Чт Дек 28, 2017 10:49 pm

Вот так будет проще для понимания
Код:
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: Вопросы новичка

Сообщение автор Pyro338 в Чт Дек 28, 2017 10:50 pm

а ну значит ты передаешь gameLoop в nextGameStep ради того, чтобы передать его в requestAnimationFrame
avatar
Pyro338
Админ

Сообщения : 587
Дата регистрации : 2017-12-25
Возраст : 32
Откуда : Ставрополь

Посмотреть профиль http://pyro338.ru/

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор raingo в Чт Дек 28, 2017 11:07 pm

Для понимания коллбеков можно еще порассуждать:
Код:
var x = 0;
function test(){
 x++;
 console.log(x);
}

function loop (callback){        //здесь callback - это объект
 callback();                    //здесь callback() - это выполнение
}

loop(test);

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор raingo в Чт Дек 28, 2017 11:17 pm

Спойлер:
Кстати, угадайте, что покажет в консоле следующий код:
Код:
var xy = 0;
var loop = function  (callback){
   xy++;
   console.log(xy);

   callback();
};

loop(loop );

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор Dessan в Чт Дек 28, 2017 11:39 pm

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: Вопросы новичка

Сообщение автор raingo в Пт Дек 29, 2017 12:21 am

реальная херня какая-та, твой console.log( myFunc() ); отрабатывает нормально
и я вижу всё содержимое функции а console.log( drawRect () ); пишет underfined Почему??
Это легко объяснимо. Моя функция в конце имеет return x;
myFunc() - это выполнение функции. На самом деле в консоле мы выводим значение x. А т.к. drawRect () ничего не возвращает, то и выдает ошибку.
К чёрту мою функцию, объясни по шагам как твоя работает. Начинается всё с loop(test); Это ссылка для запуска функции loop, которая получает параметр test ? И какой test : просто test или этот
loop() это не ссылка. Это выполнение функции. Везде, где функция пишется со скобками - это вот чисто функция.
бле, я тебя запутал. "Ссылка" это 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);
Смотри, callback - это описание программе, что тут должен быть другой код. Программа не знает заранее какой. Если мы выполним loop(x); то произойдет ошибка. Т.к. x - это число, а не функция. Но test - это функция.

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор raingo в Пт Дек 29, 2017 12:24 am

Вначале вызывается loop(test);, которая вызывает test(); там, где написано callback();

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор Dessan в Пт Дек 29, 2017 12:41 am

raingo пишет:
реальная херня какая-та, твой console.log( myFunc() ); отрабатывает нормально
и я вижу всё содержимое функции а console.log( drawRect () ); пишет underfined Почему??
Это легко объяснимо. Моя функция в конце имеет return x;
myFunc() - это выполнение функции. На самом деле в консоле мы выводим значение x. А т.к. drawRect () ничего не возвращает, то и выдает ошибку.

это я уже протупил со скобками...надо было мне написать , что console.log( myFunc ); возвращает содержимое функции а не console.log( myFunc() );

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор Dessan в Пт Дек 29, 2017 12:46 am

raingo пишет:
реальная херня какая-та, твой console.log( myFunc() ); отрабатывает нормально
и я вижу всё содержимое функции а console.log( drawRect () ); пишет underfined Почему??
Это легко объяснимо. Моя функция в конце имеет return x;
myFunc() - это выполнение функции. На самом деле в консоле мы выводим значение x. А т.к. drawRect () ничего не возвращает, то и выдает ошибку.
К чёрту мою функцию, объясни по шагам как твоя работает. Начинается всё с loop(test); Это ссылка для запуска функции loop, которая получает параметр test ? И какой test : просто test или этот
loop() это не ссылка. Это выполнение функции. Везде, где функция пишется со скобками - это вот чисто функция.
бле, я тебя запутал. "Ссылка" это 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: Вопросы новичка

Сообщение автор Dessan в Пт Дек 29, 2017 1:03 am

raingo пишет:

Немного изменю код, чтобы было понятнее:
Код:
function test(){
 console.log("!");
}

function loop (callback){        //здесь будет test
 callback();                    //здесь будет function test(){ console.log("!");} или ошибка
}

loop(test);
Смотри, callback - это описание программе, что тут должен быть другой код. Программа не знает заранее какой. Если мы выполним loop(x); то произойдет ошибка. Т.к. x - это число, а не функция. Но 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: Вопросы новичка

Сообщение автор Dessan в Пт Дек 29, 2017 4:06 am

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 в Пт Дек 29, 2017 11:27 am

ну вот, разобралсяSmile

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор Dessan в Пт Дек 29, 2017 12:39 pm

Вот только сейчас разобрался с вашими "калбэками" прочитав статью от пайро. На том сайте написано:
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 в Пт Дек 29, 2017 12:51 pm

Я всё верно понял?
ХЗ, я ничего из написанного не понял=)

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор raingo в Пт Дек 29, 2017 12:54 pm

Для меня колбек - это вызов одной функции из другой.
В это примере мы из функции loop() вызываем функцию test()

dessan по сути не существует, это приказ программе подставить вместо дессана что-то другое и сотворить с этим другим то, что мы указываем в коде. В данном случае выполнить функцию test().
Т.е. test() - это коллбек.
Код:
function test(){
 console.log("works");
}

function loop (dessan){
 dessan();
}

loop(test);

raingo
Отдел прокрастинации

Сообщения : 756
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор Dessan в Пт Дек 29, 2017 1:19 pm

ок, спасибо.

Есть ещё примеры с множественными вызовами функций из функций?

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор raingo в Пт Дек 29, 2017 2:06 pm

Дессан пишет:А эта функция выдаёт ошибку и чтоб она работала бесконечно нужно добавить аргумент
Код:
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: Вопросы новичка

Сообщение автор Dessan в Пт Дек 29, 2017 2:24 pm

нет, всё отсюда https://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-requestanimationframe

про
Код:
callback(callback); //у тебя тут loop;
согласен, спасибо)

Dessan
Юный падаван

Сообщения : 426
Дата регистрации : 2017-12-25

Посмотреть профиль

Вернуться к началу Перейти вниз

Re: Вопросы новичка

Сообщение автор Спонсируемый контент


Спонсируемый контент


Вернуться к началу Перейти вниз

Страница 1 из 8 1, 2, 3, 4, 5, 6, 7, 8  Следующий

Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения