Javascript e funções de retorno – callback

Introdução

Aprender a trabalhar com callback (funções de retorno), pode abrir várias possibilidades para você que é programador javascript. Apesar de ser um conceito simples, normalmente são poucos programadores web/backend que tem o entendimento de funções de retorno bem definido. Pensando nisso, procurei esclarecer esse assunto, afim de que você se torne um programador javascript ainda melhor.

Você vai se beneficiar de funções de retorno, principalmente caso esteja escrevendo bibliotecas próprias em javascript.

Definição

Função de retorno – callback – é uma referência para um código executável, ou um pequeno código executável, que é passado como um parâmetro para um outro código. Wikipedia

Cenário de Exemplo

Um cenário bem comum e útil para utilização de funções de retorno são as chamadas de requisições assíncronas. Por exemplo, quando você realiza uma requisição ajax, você esta realizando uma função assíncrona para o servidor.

Vamos supor que você tenha criado uma função em sua biblioteca chamada envia_requisicao(), onde ela deverá enviar uma requisição para o servidor http, através de ajax. Você tem uma outra função que irá tratar o conteúdo de retorno dessa requisição usando uma lógica específica. Veja abaixo como seria uma suposta implementação desse cenário:

var parametros = { nome: 'Douglas V. Pasqua', email: 'blabla@blabla.com.br'};

// ao término da requisição salvar o retorno em resposta
var resposta = '';
envia_requisicao(parametros);

// tratar a resposta
tratar_resposta(resposta);

Qual o problema com o cenário acima ?

Como a função envia_requisicao() esta realizando uma requisição assíncrona, e comunicando-se com o servidor, é bem provável que quando a função tratar_resposta() for chamada, a função envia_requisicao() ainda não tenha terminado seu trabalho.

Adaptando envia_requisicao() para que permita callback

Portanto, queremos que a função tratar_resposta() seja chamada somente quando acontecer de fato o retorno da requisição enviada por envia_requisicao().

Veja abaixo a modificação que faremos na função envia_requisicao() para ela possa receber uma função como parâmetro, que será chamada somente quando o retorno da requisição ajax acontecer:

function envia_requisicao(params, callback) {

	// realiza a requisicao ajax como antes
	jQuery.get('/server.php', function(data) {

		// chama a função de retorno, parametrizada no segundo argumento
		callback(data);
	});
}

Adaptando o script inicial a nova realidade

Dessa forma, podemos passar a função tratar_resposta() no segundo parâmetro da função envia_requisicao(). Assim a função tratar_resposta() será executada no momento em que a requisição assíncrona tiver retornado. (Veja na linha 7 do código anterior):


var parametros = { nome: 'Douglas V. Pasqua', email: 'blabla@blabla.com.br'};

envia_requisicao(parametros, tratar_resposta);

// exemplo de implementacao de tratar_reposta()
function tratar_resposta(resposta) {
	alert(resposta);
}

Simplificando o script inicial para usar uma função anônima:

Para simplificar ainda mais esse procedimento, podemos implementar a chamada da função de retorno usando uma função anônima:

var parametros = { nome: 'Douglas V. Pasqua', email: 'blabla@blabla.com.br'};

envia_requisicao(parametros, function(resposta) {
	alert(resposta);
});

PS: Veja que eliminamos a função tratar_resposta()

Validando se o parâmetro callback realmente é um função

No método envia_requisicao(), afim de melhorar ainda mais a implementação da função de retorno, podemos inserir a verificação no parâmetro callback, se realmente ele é uma função e também que ele possa ser um parâmetro opcional:

function envia_requisicao(params, callback) {

	// realiza a requisicao ajax como antes
	jQuery.get('/server.php', function(data) {

		// verifica se o parâmetro callback é realmente uma função antes de executá-lo
		if(callback && typeof(callback) === "function") {
			callback(data);
		}
	});
}

Conclusão

Veja que usamos um cenário que contém requisição assíncrona para exemplificar o uso de funções de retorno. Acredito que esse seja o melhor cenário para exemplo desse recurso. Nada impede que você utilize esse recurso para outras finalidades.

Sita-se à vontade para comentar este artigo.

Comments

  1. By carlos moura

    Reply

  2. By Átila

    Reply

  3. Reply

  4. By Marcio Klein

    Reply

  5. By RAFAEL KOZAR

    Reply

    • mm By Douglas V. Pasqua

      Reply

      • By rafael kozar

        Reply

  6. By Hamilton

    Reply

    • mm By Douglas V. Pasqua

      Reply

  7. By Vinicius Nunes Macedo

    Reply

    • mm By Douglas V. Pasqua

      Reply

  8. Reply

    • mm By Douglas V. Pasqua

      Reply

  9. Reply

    • mm By Douglas V. Pasqua

      Reply

  10. By fabio

    Reply

    • mm By Douglas V. Pasqua

      Reply

Deixe um comentário

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: