Callbacks em Javascript

Eu as vezes tenho o mau-hábito de pensar que o que eu sei todos sabem e acabo menosprezando certos assuntos interessantes por causa disso.
Já ouviu falar em callbacks ? Se você trabalha com Javascript com certeza já ouviu, mas você sabe o que são e para que servem ?
jQuery usa muito, mas se você não sabe o que são eu explico =D.

Digamos que você precise de uma função que crie uma div após 5 segundos numa tela. É besta, mas é apenas um exemplo…
Só que essa função é muito útil para você e toda hora você precisa usá-la. Então você arruma ela, deixa ela o mais simples possível porque parece ser uma solução boa para aquele propósito.

Mas você acaba notando que aquela solução tem que ser modificada toda hora para atender aos requisitos de cada projeto. Como assim?
Eu tenho essa função de criar div a cada 5 segundos, bonitona:

function div(target, conteudo){
	setTimeout(function(){
	
	var div = document.createElement("div")
	div . innerHTML = conteudo
	target . appendChild( div )
	
	}, 5000)
}

Mas no outro projeto eu só quero trocar a classe da div. Eu teria de reescrever a função de novo:

function div(target, classe){
	setTimeout(function(){

	var div = document.createElement("div")
	div . className = classe
	target . appendChild( div )

	}, 5000)
}

Toda hora reescrever a função que faz a mesma coisa… que idiotice né ? Bom, nesse caso, é uma boa prática usar callbacks.
Callbacks nada mais são do que funções que são passadas como argumento de uma outra função. Vou explicar melhor.
Se eu fizer:

function f( variavel ){
	alert( variavel )
}
var a = 5
f(a) 

Vai me dar um alert mostrando 5.
Se eu fizer:

function f2(){
	alert( " Função 2 " )
}

f(f2)

O alert vai me retornar o protótipo da função, ou seja, a função foi passada para a outra função normalmente.
Só, que para se executar a função é necessário sempre usar o parênteses.
A função f não vai chamar a função f2, só vai mostrar o corpo dela. Como eu faria para chamar a função f2 na f?

Simples, só chamá-la na f:

function f( funcao ){
	funcao()
}

Pronto, agora, se eu fizer:

f( f2 )

O alert vai mostrar “Função 2”. Ou seja, a f2 foi passada como argumento e a f pega essa função,
usa uma nova variável chamada “funcao” e faz a chamada dela.
Sabendo disso, daria para nós generalizarmos a nossa primeira função utilizando esse conceito.

function div(target, callback){	
	setTimeout(function(){
		var div = document.createElement("div")
		target . appendChild( div )
		callback?callback(div):null
	}, 5000)
}

A função continua criando uma div e colocando num alvo qualquer após 5 segundos,
porém na última linha do seu código eu verifico se a variável callback está setada, ou seja, se foi passado algo como segundo argumento.
Se eu passar uma função a f vai fazer o seguinte:

callback = funcao

Agora a função está generalizada e callback é uma função qualquer.
Se eu quiser criar um div após 5 segundos e adicionar uma classe nele eu faria:

div( 

	document.body, 

	function(div){
		div.className = "Classe"
	}
)

Se eu quiser criar uma div e botar um conteúdo ao invés de colocar uma classe eu faria:

div(

	document.body,
	
	function(div){
		div.innerHTML = " Meu conteúdo"
	}
)

De novo, para entender, o que a f vai fazer nesse último caso é :

target = document.body
callback = function (div){ div.innerHTML = "Meu conteúdo"}

E então chamará:

callback(div)

O argumento “div” diz respeito ao elemento criado na função div(), pois é na função div() que eu faço a chamada do callback.

**Callbacks utilizam conceitos como programação funcional e closures. Mas isso é assunto para outro post 😉

Eu utilizei esse exemplo para demonstrar dois casos interessantes onde as callbacks são usadas.
Um caso é quando queremos generalizar uma função para utilizá-la de várias formas diferentes sem precisar mexer nela.

Outro caso é quando não sabemos quando algo termina para poder começar outro.
Por exemplo, eu uso uma função que faz um efeito de fadeOut (sumindo elemento aos poucos) , mas após esse efeito,
queria a mostrar um alert na tela. Como você sabe que terminou o efeito para poder chamar outra função? Agora você já sabe !!!

Anúncios

18 comentários sobre “Callbacks em Javascript

  1. Vlw man!! Talvez eu comece a me animar mais, postar e divulgar mais meu blog né rsrs. Por enquanto ainda está nas profundezas heheh.

    Abraço.

  2. Nossa…q legal! Callbacks era um assunto meio complicado pra mim. Agora ja posso tentar utilizá-las no meu Ajax ^^
    Obrigadoooooo..muiitoo bem explicado

  3. Parabens pelo blog e principalmente por este POST, eu estava a procura de uma explicação rapida e fácil para meu entendimento, e esta serviu como uma luva. Eu ja tinha uma noção sobre callbacks porem nao tinha me aprofundado… agora estou fazendo mais funções genericas para dinamizar meu trabalho.

    É isto ai obrigado.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s