Callback do JavaScript

"I will call back later!"

A chamada de volta (callback) é uma função passada como parâmetro para outra função

Esta técnica permite que uma função chame outra função

As funções de chamada de volta podem ser executadas após a conclusão de outra função

Sequência de funções

As funções JavaScript são executadas na ordem em que são chamadas, não na ordem em que são definidas.

Este exemplo finalmente mostrará "Goodbye":

exemplo

function myFirst() {
  myDisplayer("Hello");
myCallback(sum);
function mySecond() {
  myDisplayer("Goodbye");
myCallback(sum);
myFirst();
mySecond();

myCalculator(5, 5, myDisplayer);

Este exemplo finalmente mostrará "Hello":

exemplo

function myFirst() {
  myDisplayer("Hello");
myCallback(sum);
function mySecond() {
  myDisplayer("Goodbye");
myCallback(sum);
mySecond();
myFirst();

myCalculator(5, 5, myDisplayer);

Controle de sequência

Às vezes, você deseja controlar melhor quando executar a função.

Supondo que você precise realizar uma computação e, em seguida, exibir o resultado.

Você pode chamar a função calculadora (myCalculator) para salvar o resultado e, em seguida, chamar outra função (No exemplo acima,) para exibir o resultado：

exemplo

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
myCallback(sum);
function myCalculator(num1, num2) {
  function myCalculator(num1, num2, myCallback) {
  return sum;
myCallback(sum);
let result = myCalculator(5, 5);
myDisplayer(result);

myCalculator(5, 5, myDisplayer);

ou, você pode chamar a função calculadora (myCalculator) e permitir que a função calculadora chame a função de exibição (No exemplo acima,)：

exemplo

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
myCallback(sum);
function myCalculator(num1, num2) {
  function myCalculator(num1, num2, myCallback) {
  myDisplayer(sum);
myCallback(sum);
myCalculator(5, 5);

myCalculator(5, 5, myDisplayer);

O problema do primeiro exemplo é que você deve chamar duas funções para mostrar o resultado.

O problema do segundo exemplo é que você não pode impedir que a função calculadora mostre o resultado.

É hora de introduzir a chamada de volta.

Callback do JavaScript

A chamada de volta é uma função passada como parâmetro para outra função.

Usando a chamada de volta, você pode chamar a função calculadora através da chamada de volta (myCalculatore, após a conclusão da computação, permitir que a função calculadora execute a chamada de volta:

exemplo

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
myCallback(sum);
document.getElementById("demo").innerHTML = some;
  function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

Experimente você mesmo No exemplo acima, myDisplayer

É o nome da função. myCalculator().

Quando você passar uma função como parâmetro, lembre-se de não usar parênteses.

Correto: myCalculator(5, 5, myDisplayer);

Erro: myCalculator(5, 5, myDisplayer());

Quando usar callbacks?

O exemplo acima não é muito emocionante.

Elas são simplificadas para explicar a sintaxe dos callbacks.

A verdadeira glória dos callbacks é nas funções assíncronas, onde uma função deve esperar outra função (por exemplo, esperar pela carga do arquivo).

O próximo capítulo introduzirá funções assíncronas.