Что такое callback?

Question

[JustHum6n]

Везде читаю, как работает коллбек. Там же нахожу примеры. Пишу свои примеры и ничего не работает.

function dohomework(subject, f){
  setTimeout(function(){alert("doing " + subject + " homework")}, 2000);
  f();
}
dohomework("math", greet);

function greet(){
  alert("finished homework");
}

Как утверждает источник, если я передал функцию параметром другой функции это будет коллбеком и в данном примере, она вызовется после того, как выполнится сет тайм аут... Но ничего не работает

Comments

[Adamos]

А в консоль вы не смотрели? Если js должен работать, но не работает, обычно это означает, что он вывалил туда ошибку.

[Vadim Bogomazov]

Все работает.

[Алексей Уколов]

она вызовется после того, как выполнится сет тайм аут

Обратите внимание, что она действительно выполнится после того, как выполнится setTimeout, но не после того, как выполнится то, что вы в этот setTimeout передали.

[JustHum6n]

Vadim Bogomazov, у меня в консоли выводится сначала finished homework, а уже затем doing math homework.

[JustHum6n]

Adamos, ничего не работает в плане, что, судя по источнику сначалк должно вывестись doing math homework, а зачем greet(), а у меня получается наоборот...

[JustHum6n]

Алексей Уколов, не понимаю. Если бы это выполнялось после того, как выполнился бы сет тайм аут, то должно было бы выполниться после 2с вне зависимости от того, что я передал?

[Roman K]

JustHum6n, Нет. setTimeout асинхронно выполняет функцию, которую ты передаёшь через твои 2000мс. Сам setTimeout при этом выполняется почти мгновенно. Чтобы это понять, нужно понять, как работает конкурентное программирование, что такое event-loop и всё такое.

[Adamos]

JustHum6n, когда вместо "получается наоборот" программист пишет "ничего не работает", у него действительно что-то не работает. Не на компьютере...

[JustHum6n]

Adamos, я описал проблему и сказал, что ничего не работает подразумевая, что ничего не работает по данному принципу. Если вы настолько глупый, что не смогли это понять, то "что-то не работает" только у вас

Answer 1

[Vadim Bogomazov]

Насколько я понял, должно быть так.

Comments

[JustHum6n]

Тогда какой смысл коллбека?

Answer 2

[Дима Паутов]

https://jsfiddle.net/nzbgr9fd/
Ну так setTimeout - это отложенная функция, ассинхронная. Вызывайте колбек внутри таймер, а не следом за ним.

Comments

[JustHum6n]

Тогда какой смысл колбека, если можно просто все, что нужно записать в сет тайм аут?

[Дима Паутов]

JustHum6n, Ну что значит какой смысл. Вот у вас есть ваша функция, внутри которой вы делаете, например, ajax запрос. Вы хотите что-то сделать после этого запроса, вы вызываете callback.

setTimeout(callback) - setTimeout - это функция, которая принимает callback, то, что произойдёт после указанных секунд. Напишите всё внутри setTimeout, но для этого и существует разделение кода. Зачем всё мешать.

Весь js пропитан callback функциями. Promise, fetch, setTimeout, setInterval, addEventListener и туча других функций имеют callback.

Ещё пример. Есть например готовый слайдер, у него есть события. Например, событие когда слайд сменился. Вам в этот момент нужно сделать своё действие. Вы будете использовать callback для того, что бы сделать своё действие после конца другого действия

Answer 3

[h88p]

Вам следует посмотреть
Там есть похожий пример, но без колбека, и объясняется, почему в вашем случае сначала появляется алерт из колбека, а потом из таймаута

Спойлер
Таймаут запущен => программа работает дальше и натыкается на коллбек => он выполняется => и через заданное время срабатывает алерт из таймаута

Comments

[JustHum6n]

Тогда как сделать, чтобы колбек выполнился после? Пишут, что надо его в тайм аут занести, тогда какой в нем смысл, если было бы проще всю функцию в сет тайм аут занести?

[h88p]

JustHum6n,

const timer = subject => new Promise(res => setTimeout(_=> {
	res(subject);
}, 2000));

async function dohomework(subject, callback){
	let res = await timer(subject);
	alert(res);
	callback();
}

function f() {
	alert('finished homework');
}

dohomework('math', f);

Или

function dohomework(subject, callback){
  timer(subject).then(data => {
	alert(data);
	callback();
  });
}

[Виталий Першин]

JustHum6n, Смысл в том что колбек в таком примере это не какая-то конкретная функция, а именно та которую вы передадите. Как выше сказали, если например у вам есть событие окончание работы таймера или перемотки слайда, то вы можете передать много абсолютно разных функций, которые будут вызваны в нужный момент. Но на самом деле все зависит от задачи, вы возможно хотели сделать что-то конкретное и начитались лишнего. Если вам нужно вызвать функцию из вашего сеттаймаута, то вызывайте как вам удобно, а когда столкнетесь с проблемой колбеков вы уже будете готовы к её решению

Answer 4

[Антон Швец]

function callMe(name, callback) {
  console.log('callMe');
  callback(name);
}

function myCallback(myName) {
  console.log('myCallback');
  console.log(myName);
}

callMe('vasya', myCallback);

В данном случае функция myCallback передается как аргумент в функцию callMe
Функция callMe в какой-то момент своей работы берет свой аргумент callback и вызывает его, передавая ему какие хочет аргументы. Это называется обратным вызовом, а callback тут у нас будет функцией обратного вызова, т.е. коллбэком.

В js очень часто функции принимают на вход другие функции, чтобы вызвать их в каких-то условиях, например setTimeout или функции работы с массивами.