Na maioria das vezes, o código JavaScript é executado de forma síncrona. Isso significa que uma linha de código é executada e a próxima é executada e assim por diante.

Tudo está como você espera e como funciona na maioria das linguagens de programação. No entanto, há momentos em que você não pode esperar apenas pela execução de uma linha de código, você não pode esperar apenas 2 segundos para carregar um arquivo grande e interromper o programa completamente, você não pode simplesmente esperar que um recurso de rede seja baixado antes de fazer outra coisa.

JavaScript resolve esse problema usando callbacks.

Um dos exemplos mais simples de como usar callbacks é o temporizador. Os temporizadores não fazem parte do JavaScript, mas são fornecidos pelo navegador e pelo Node.js.

Vamos falar sobre um dos temporizadores que temos: setTimeout ().

A função setTimeout () aceita 2 argumentos: uma função e um número. O número são os milissegundos que devem passar antes da execução da função.

Exemplo:

setTimeout (() => {
  // é executado após 2 segundos
  console.log ('dentro da função')
} 2000)

A função que contém a linha console.log ('dentro da função') será executada após 2 segundos. Se você adicionar um console.log ('before') antes da função e console.log ('after') depois:

console.log ('before')
setTimeout (() => {
  // é executado após 2 segundos
  console.log ('dentro da função')
} 2000)
console.log ('after')

Você verá isso acontecendo no seu console:

antes
depois de
dentro da função

A função de callbacks é executada de forma assíncrona.

Esse é um padrão muito comum ao trabalhar com o sistema de arquivos, a rede, os eventos ou o DOM no navegador.

Veja como podemos implementar callbacks.

Definimos uma função que aceita um parâmetro de retorno de chamada, que é uma função. Quando o código está pronto para chamar a callback, nós o chamamos passando o resultado:

const doSomething = callback => {  
  //fazer coisas
  //fazer coisas
  resultado const = / * .. * /
  retorno de chamada (resultado)
}

O código que usa essa função usaria assim:

doSomething (resultado => {
  console.log (resultado)
})