JavaScript: O que é um CallBack?: Difference between revisions
(Criou a página com " O que é um CallBack? Um callback é uma função a ser executada após a execução de uma outra função - daí o nome 'call back'. Como em JavaScript, as funções s...") |
|||
(4 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
O que é um CallBack? | == O que é um CallBack? == | ||
Um callback é uma função a ser executada após a execução de uma outra função - daí o nome 'call back'. | Um callback é uma função a ser executada após a execução de uma outra função - daí o nome 'call back'. | ||
Line 10: | Line 10: | ||
Vamos ver um exemplo básico: | Vamos ver um exemplo básico: | ||
Imagine que um estudante vai estudar primeiro matemática e depois português. | '''1) Imagine que um estudante vai estudar primeiro matemática e depois português. Em javascript seria:''' | ||
function estudarMatematica(){ | function estudarMatematica(){ | ||
Line 28: | Line 28: | ||
'''Se você estiver no Chrome, execute Ctrl + Shift + j, e copie e cole o código pra ver o resultado''' | '''Se você estiver no Chrome, execute Ctrl + Shift + j, e copie e cole o código pra ver o resultado''' | ||
'''2) Agora imagine que estudar matemática leve mais tempo que estudar português. Em javascript seria:''' | |||
function estudarMatematica(){ | |||
// Simulate a code delay | |||
setTimeout( function(){ | |||
console.log('Estudar Matematica'); | |||
}, 500 ); | |||
} | |||
function estudarPortugues(){ | |||
console.log('Estudar Portugues'); | |||
} | |||
estudarMatematica(); | |||
estudarPortugues(); | |||
O resultado: | |||
Estudar Portugues | |||
Estudar Matematica | |||
Não é que o JavaScript não executou nossas funções na ordem em que o desejamos, e sim que o JavaScript não '''espera''' uma resposta do estudarMatematica() antes de passar para executar o estudarPortugues(). | |||
== Vamos criar um CallBack? == | |||
function estudarMatematica(callback){ | |||
console.log('Estudar Matematica'); | |||
callback(); | |||
} | |||
function estudarPortugues(){ | |||
console.log('Estudar Portugues'); | |||
} | |||
estudarMatematica(estudarPortugues); | |||
O resultado: | |||
Estudar Matematica | |||
Estudar Portugues | |||
= Ver também = | = Ver também = |
Latest revision as of 17:50, 22 June 2017
O que é um CallBack?
Um callback é uma função a ser executada após a execução de uma outra função - daí o nome 'call back'.
Como em JavaScript, as funções são objetos. As funções podem assumir funções como argumentos e podem ser retornadas por outras funções. Funções que fazem isso são chamadas de funções de ordem superior. Qualquer função que é passada como um argumento é chamada de função de callback.
Acontece que JavaScript é uma linguagem baseada em eventos. Isso significa que, em vez de aguardar uma resposta antes de seguir em frente, o JavaScript continuará executando sem que o evento anterior tenha finalizado.
Vamos ver um exemplo básico:
1) Imagine que um estudante vai estudar primeiro matemática e depois português. Em javascript seria:
function estudarMatematica(){ console.log('Estudar Matematica'); } function estudarPortugues(){ console.log('Estudar Portugues'); } estudarMatematica(); estudarPortugues();
O resultado:
Estudar Matematica Estudar Portugues
Se você estiver no Chrome, execute Ctrl + Shift + j, e copie e cole o código pra ver o resultado
2) Agora imagine que estudar matemática leve mais tempo que estudar português. Em javascript seria:
function estudarMatematica(){ // Simulate a code delay setTimeout( function(){ console.log('Estudar Matematica'); }, 500 ); } function estudarPortugues(){ console.log('Estudar Portugues'); } estudarMatematica(); estudarPortugues();
O resultado:
Estudar Portugues Estudar Matematica
Não é que o JavaScript não executou nossas funções na ordem em que o desejamos, e sim que o JavaScript não espera uma resposta do estudarMatematica() antes de passar para executar o estudarPortugues().
Vamos criar um CallBack?
function estudarMatematica(callback){ console.log('Estudar Matematica'); callback(); } function estudarPortugues(){ console.log('Estudar Portugues'); } estudarMatematica(estudarPortugues);
O resultado:
Estudar Matematica Estudar Portugues