Então você chegou esta estudando JS, ou precisou fazer algo que envolve JS e esta em callback.
Esta difícil de entender?
Eu te entendo.
Primeiro, vamos entender como o JS funciona por dentro(de modo simples e básico)
A maquina interna do JS lê e executa uma linha por vês!
As funções são resolvidas na ordem que são chamadas!
linha 1
linha 2
linha 3
function souResolvidaPrimeiro(){
console.log('souResolvidaPrimeiro')
}
function souResolvidaEmSegundo(){
console.log('souResolvidaEmSegundo')
}
function souResolvidaEmTerceiro(){
console.log('souResolvidaEmTerceiro')
}
//ordem em que foram chamadas!
souResolvidaPrimeiro()
souResolvidaEmSegundo()
souResolvidaEmTerceiro()
Isso quer dizer que, a souResolvidaEmTerceiro() nunca será resolvida antes da souResolvidaPrimeiro().
Primeiro é preciso resolver cada linha antes da souResolvidaEmTerceiro()
Se quiser entender melhor >
Medium
Mas você precisa que uma das função faça algo demorado.
Ou daqui alguns segundos.
Ou precisa pegar dados de algum lugar, e isso possa demorar
Como fazer isso?
Se o Js executa linha a linha. Ele vai TRAVAR até ter o que foi pedido e assim passar para a próxima!
function souResolvidaPrimeiro(){
console.log('Mas preciso pegar algo em outro servidor e isso demora')
}
function souResolvidaEmSegundo(){
console.log('souResolvidaEmSegundo')
}
function souResolvidaEmTerceiro(){
console.log('souResolvidaEmTerceiro')
}
//ordem em que foram chamadas!
souResolvidaPrimeiro()
souResolvidaEmSegundo()
souResolvidaEmTerceiro()
Teremos um problema aqui.
O usuário vai ficar esperando com tudo travado até ter todas as 3 funções resolvidas?
E se as 3 funções precisam fazer coisas demoradas?
Tudo fica travado para sempre?
Não!
Aqui entra o callback.
function souResolvidaPrimeiro(){
console.log('Mas preciso pegar algo em outro servidor e isso demora')
}
Esta função faz algo que demora.
Mais sobre callback.
Segundo o MDN: https://developer.mozilla.org/pt-BR/docs/Glossary/Callback_function
Uma função callback é uma função passada a outra função como argumento, que é então invocado dentro da função externa para completar algum tipo de rotina ou ação.
Ou seja, você tem uma função que recebe outra via parâmetro.
Em algum momento do código vc chama essa função do parâmetro.
function func(num){
console.log('num maior que 5',num)
}
function somar(num1, num2, callback){
const result = num1 + num2
return callback(result);
}
somar(2,1, func)
O que fizemos acima foi simples
Apenas quando declaramos uma função somar, deixamos claro que receberíamos 1 função de callback(a função pode ser qualquer uma).
Neste caso usamos como callback a função de nome func.
Nossa func recebe um parâmetro. E o mostra no console.
O parâmetro é exatamente o resultado da nossa primeira função!
Simples de entender?
O callback é muito utilizado no Front e no back com JS.
um bom exemplo e se você gostar de frontEnd deve ser umas das funções mais repetidas na sua vida é a addEventListener.
alvo.addEventListener('click', callback)
explicando por cima,addEventListener é uma função que sempre esta atrelada a algum div dentro do seu código.
e ela precisa de um callback. Este callback é o que você precisa que aconteça.
alvo.addEventListener('click'). Como você vê.
Esta função esta esperando um clique.
Quando alguém clicar, ela vai executar a função de callback
function callback(){
console.log('foi clicado')
}
alvo.addEventListener('click',callback)
Ou
você pode chamar a callback diretamente na função!
alvo.addEventListener('click',()=> {
console.log('foi clicado')
})
São as 2 maneiras de chamar uma função de callback.
Criando a função fora ou dentro.
Callbacks são muito utilizados.
Se você precisa repetir uma função, mas não pode utilizar o resultado da mesma forma, você cria mais de uma função de callback.
function subtrair(num1,num2){
const result = num1 - num2
console.log(result)
}
function somar(num1,num2){
const result = num1 + num2
console.log(result)
}
function doisNumeros(num1,num2, callback){
callback(num1, num2)
}
doisNumeros(5,4,subtrair)
doisNumeros(5,4,somar)
doisNumeros(5,4,(num1,num2)=> console.log(num1/num2))
function subtrairSal(sal,desconto){
const result = sal - desconto
console.log(result)
}
function somarSal(sal,beneficio){
const result = sal + beneficio
console.log(result)
}
function doisNumeros(salInicial,adiantado, callback){
const salFinal = salInicial - adiantado
callback(salInicial,salFinal)
}
doisNumeros(5000,4000,subtrairSal)
doisNumeros(5000,4000,somarSal)
Você pode dizer, mas isso eu faço tudo de uma vez. Sem callback.
Sim, da pra fazer! Claro que pode mas...
Outra forma de utilizar callback é quando o que você precisa fazer, depende de algo externo. Ai entra todo o poder do JS e do callback
Buscar um dado em outro site. Isso demora.
Esperar que algo seja salvo no banco de dados.
Utilizar um timer.
Tudo isso e muito mais pode ser utilizado callbacks
O exemplo mais utilizado para exemplificar o assincronismo do JS é a função setTimeout(). Ela é boa para mostrar como o Js funciona quando se usa callbacks e quando se precisa mostrar que algo demore.
setTimeout(() => console.log("1"),2000);
console.log(2)
setTimeout(callback, tempoEmMilissegundos);
Ela é uma função simples da api de navegadores.
Você já entende callback.
Já consegue entender como essa função funciona?
Mas como eu fiz para entender callback?
Depois de ler e reler muita coisa que explicava basicamente o que você viu acima. Eu tentei entender, mas demorou um pouco para entender.
O que fiz para entender do meu jeito, foi pensar em uma fabrica. Exemplos de fabricas sempre me ajudam e pensar em pessoas e suas funções.
Imaginei que, a função principal era uma linha de produção de caixas. Onde as funções de callback retiravam da linha as caixas ruins!
Você pode ter mais de uma função de callback!
Isso me ajudou a entender melhor!
Também imaginei alguém pedindo algo a um terceiro.
Você tem uma moto. E pede para um lavacar limpar ela.
E continua fazendo suas coisas.
Em algum momento o callback vai responder com sua moto limpa ou não! (este exemplo será usado no futuro)
Isso que fiz para me ajudar a entender melhor callbacks!
Se isso não te ajudou!
Quem sabe este outro post ajude > https://dev.to/uriel29/javascript-primeiro-aprender-funcoes-callback-sem-entender-o-conceito-3ggl
Se não entendeu mesmo assim. Por favor deixe sua dúvida nos comentários! Irei fazer o que puder para te ajudar!
Top comments (0)