180

Vejo em muitos códigos e até mesmo arquiteturas a palavra callback, vejo que é em funções JavaScript.

  • Mas o que é?
  • Como é usada?
  • Por que?

Gostaria de um exemplo de uso real.

0

4 Respostas 4

192
+50

Callback é uma função que é usada como "callback". Ela é tipicamente passada como argumento de outra função e/ou chamada quando um evento for acontecido, ou quando uma parte de código receber uma resposta de que estava à espera.

Isto é muito comum em javascript lado cliente e servidor (NodeJS) mas não só. A função callback é muitas vezes assíncrona na medida em que é chamada como consequência de outro código que esta a correr no background. A grande vantagem é que assim o computador pode ir processando outros processos enquanto a resposta não chega e não precisa assim de parar tudo à espera dessa resposta.

Um exemplo clássico é um auscultador de eventos que chama uma função quando o evento acontece:

function callback(e) {
    alert('Aconteceu um evento ' + e.type);
}
window.addEventListener('click', callback);

Este callback vai ser chamada quando fizer um click na janela. Até isso acontecer o processador vai processando outras coisas que acontecem na aplicação.

Exemplo: http://jsfiddle.net/D2PuH/


Outro exemplo é uma chamada de ajax, que faz um pedido ao servidor e corre a função quando receber a resposta.

Essa função é uma função "callback". No exemplo em baixo (http://jsfiddle.net/skQr7/) chamei-lhe minhaCallBack.

function minhaCallBack(returnhtml) {
    $("#result").html(returnhtml);
    $("#loadingimg").hide();
}

$(document).ready(function (e) {
        $.ajax({
            url: form_url,
            type: form_method,
            data: form_data,
            cache: false,
            success: minhaCallBack
        }); 
});

Outro exemplo ainda (http://jsfiddle.net/V3wDF/) é uma animação que chama a callback no fim da animação estar completa:

function completa() {
    alert('Este alert está dentro da função "callback"');
}
$('div').animate({
    'height': '200px'
}, {
    duration: 2000,
    complete: completa
});

Outro exemplo ainda, para tentar clarificar mais depois de surgir mais uma pergunta sobre o assunto.

Vou fazer uma analogia entre código síncrono e código assíncrono.
Imaginando esta situação:

Problema:

Como transformar um numero no formato string, com parte decimal longa demais que deve ser convertido em dólares, e verificar se um dado cliente têm direito a desconto.

Solução síncrona:

Para resolver este problema de forma síncrona temos de saber o valor inicial e o valor do câmbio antes de iniciarmos o cálculo. Isto nem sempre é assim, mas para o exemplo vamos assumir que sabemos o seguinte:

var valorInicial = "1003,087293487";
var descontoCliente = "5%";
var cambio =  1.1158; // 1 EUR = 1.11580USD

assim podemos fazer a transformação de maneira simples:

var valorInicialEmFormatoNumerico = Number(valorInicial.replace(',', '.'));
var valorComDescontoAplicado = valorInicialEmFormatoNumerico - (valorInicialEmFormatoNumerico * parseFloat(descontoCliente) / 100);
var valorEmDolares = valorComDescontoAplicado * cambio;
var totalComDuasCasasDecimais = valorEmDolares.toFixed(2);

Assim o resultado é obtido com passos síncronos, e dá 1063.28

Solução assíncrona:

Imagina agora que precisamos de fazer a mesma coisa, mas não temos a informação toda disponível, pois os câmbios mudam constantemente, não podemos ter disponível o desconto de todos os possíveis clientes, e nem mesmo o preço inicial pois temos de perguntar ao nosso fornecedor primeiro.

Como fazer?

Neste caso temos de fazer a coisa assíncrona, ou seja correndo parte do código, esperar por respostas, correr mais um pedaço e esperar por outra resposta, etc...

Podemos dizer que quando perguntamos algo a um serviço exterior fazemos provavelmente um pedido ajax. E agora precisamos de uma ferramenta para receber a resposta, é aí que callbacks entram em jogo.

Quando envio uma pergunta para um serviço externo tenho de lhe dizer como ele me deve contactar/informar com o resultado. Uma maneira comum é enviar uma função com o pedido para que ela seja corrida quando a resposta chegar.

enviar uma função com o pedido para que ela seja corrida quando a resposta chegar

Se eu enviar uma função a um setTimeout, digo ao setTimeout qual o código a correr quando o tempo tiver esgotado. Essa função pode ter o nome que quisermos, mas a sua funcionalidade, o seu tipo é callback:

var fazerAlgo = function(){ alert('O tempo chegou ao fim!'); }
setTimeout(fazerAlgo, 2000); // correr ao fim de 2 segundos

Voltando ao exemplo das contas:

para fazermos o cálculo anterior com lógica assíncrona temos de encadear as coisas e depender de funções que vão sendo chamadas com tempos de espera entre elas. Assim temos de encadear tudo, por exemplo assim:

pedirPrecoAoFornecedor(numeroProduto, function(respostaDoFornecedor) {
  var valorInicialEmFormatoNumerico = Number(respostaDoFornecedor.replace(',', '.'));
  pedirInformacaoDesconto(numeroCliente, function(descontoCliente) {
    var valorComDescontoAplicado = valorInicialEmFormatoNumerico - (valorInicialEmFormatoNumerico * parseFloat(descontoCliente) / 100);
    pedirCambioDaHora('USD', function(valorDoDolar) {
      var valorEmDolares = valorComDescontoAplicado * valorDoDolar;
      var totalComDuasCasasDecimais = valorEmDolares.toFixed(2);

      // !! agora temos o resultado!! 
      alert(totalComDuasCasasDecimais + 'USD');

    })
  })
})

Este encadeamento de funções é necessário pois cada callback será chamada quando o serviço externo quiser. Por exemplo a função pedirPrecoAoFornecedor recebe dois argumentos: o numero do produto e uma função. Como eu sei que o que vou receber é o preço do produto coloco já isso como nome da variável, para facilitar a leitura. Essa função que passo a pedirPrecoAoFornecedor é portanto uma callback, um mecanismo para o serviço externo me poder devolver o que preciso.

3
  • 8
    +1 excelente resposta, exemplos para tu, devias escrever um livro :P
    – Jorge B.
    Commented 31/07/2014 às 14:53
  • 4
    Ficou bem explicado, obrigado! Commented 24/04/2016 às 16:28
  • 4
    Muito boa essa explicação, parabéns. Commented 17/10/2018 às 12:15
64

CallBack (ou chamada de retorno, em português) é um mecanismo de controle de fluxo que visa beneficiar processos assíncronos.

A idéia principal é liberar a aplicação para que outras ações sejam tomadas sem que ela fique aguardando o retorno de processos síncronos, esperando uma resposta remota, ou (caso a plataforma/framework em uso suporte threading) com alto consumo de processamento se você abriu uma thread separada para esperar pela resposta.

Em um mecanismo tradicional, a solicitação síncrona (e consequente espera) por um recurso seria assim em pseudocódigo:

Var B = A.SoliciteRecurso();
Print B.Nome;

Vamos dizer que operações dentro de SoliciteRecurso() tomam um minuto. neste caso, sua aplicação ficará todo este tempo esperando pela resposta.

Agora, uma operação assíncrona via CallBack:

Objeto.AssinarRetornoDeSoliciteRecurso += ProcessarRetorno;
Var B = A.SoliciteRecursoAssincrono();

função ProcessarRetorno(Objeto B)
{
    Print B.Nome;
}

Neste caso, o controle da aplicação é retornado logo após o método SoliciteRecursoAssincrono(). Quando, e se, o objeto A gerar o evento que dispara AssinarRetornoDeSoliciteRecurso, o método ProcessarRetorno será chamado.

Várias tecnologias modernas se utilizam deste recurso. Por exemplo, este snippet em AngularJS:

function directoryController($scope, $http) {
    'use strict';
    $scope.url = 'backend/services/dir.aspx?q=';

    $scope.search = function() {
        $http.post($scope.url + $scope.keywords).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.listOfUsers = data;
            }).
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });
    };

Basicamente diz:

  • No método search, acesse essa URL via método Post.
  • Caso bem sucedido (evento success), proceda desta maneira.
  • Caso um erro tenha ocorrido (evento error), proceda desta outra maneira.

Os benefícios trazidos por chamadas assíncronas são claros: Você tem uma aplicação mais responsiva e com menor consumo de processamento.

Por outro lado, introduz novos paradigmas que você precisa tratar no seu código, como controle assíncrono de fluxo (por exemplo, 'só avance caso tenha recebido o retorno bem-sucedido do método M.')

0
32

Quando um evento (clique sobre um botão, carregamento da página concluído, mouse sobre um elemento qualquer, etc.) acontece, o browser avisa todos os ouvintes (listeners), chamando suas funções de calback.

window.addEventListener("load", function(){
    console.log("Eu sou uma função de callback, prazer!");
});

No exemplo acima, adicionamos um ouvinte de evento "onload" na janela (ou seja, requisitamos que o browser chame nossa função anônima - function(){...} - assim que a página terminar de carregar na memória do computador do usuário).

Basicamente, podemos fazer muitas coisas com uma função de callback: trocar um texto na página, esconder elementos, entre muitos outros usos.

10

Mas o que é?

Uma função de callback é aquela função que pode ser chamada pelo método que a recebe no momento que este desejar.

Em uma pseudo linguagem, seria algo assim:

funcao(Function funcaoCallback) {
    // funcao faz diversas coisas
    funcaoCallback.call(); // chama a função passada por parâmetro
}

Este conceito é comumente associado à linguagem Javascript devido a popularidade desta linguagem, pois desde os seus primórdios o Javascript aceita a passagem de métodos como parâmetro para uma função. Outras linguagens de programação populares só vieram a ter este tipo de características muito anos depois, como ocorreu com o Java.

Como é usada?

Existem diferentes maneiras de usar ela em cada linguagem e, conceitualmente, ela pode ser usada de incontáveis maneiras.

Vamos a um exemplo em Java. No Java 8 você pode passar um método de qualquer classe para um método que aceita o parâmetro Supplier. Imaginando que temos este método em uma classe chamada RetryMethod:

public void run(Supplier<T> callbackFunction) throws Exception {
    try {
        // código fazendo inúmeras coisas
        callbackFunction.get(); //chamada da função recebida por parâmetro
    } catch (Exception e) {
        log.warn("Command failed", e);
        return retry(function);
    }
}

E para passar a função para este método:

RetryMethod<Object> retryMethod = new RetryMethod<>();
retryMethod.run(() -> service.metodoChamadoPorCallback(qualquerParametro));

Assim, seja lá o que o método metodoChamadoPorCallback faz dentro da classe com nome de variável service, o método run da classe RetryMethod tem o total controle de quando chamá-la.

Por que?

Como disse anterioremente, as possibilidades são inúmeras.

No exemplo acima, o código usado pode dar o controle para a classe RetryMethod do método metodoChamadoPorCallback ser chamado diferentes vezes em caso de uma Exception dentro dele, fazendo várias tentativas (retries). Esta classe RetryMethod poderia receber qualquer tipo de função no qual o objetivo seja repetir a chamada da função passada para callback, sem se importar com o que a função faça.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .