logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

Funções callback

Funções callback são funções passadas como argumento de outra função. Normalmente elas são executadas ao final da função principal.

Este recurso é muito útil em Javascript, que é uma linguagem assíncrona. Isto significa que nesta linguagem, vários comandos podem ser executados ao mesmo tempo, sem que um precise esperar que o funcionamento do comando anterior termine.

Vejamos o exemplo a seguir:

                    

    function pegar_usuario(){
        var u = {
            'nome': 'João'
        };
        return u;
    }
            
    function saudar_usuario(user) {
        console.log('Olá ' + user.nome + ', como vai?');
    }
            
    var user = pegar_usuario();
    saudar_usuario(user);

                    
                

Na função pegar_usuario(), consultamos as informações de um usuário. Depois utilizamos esta informação na função saudar_usuario() para soltar uma mensagem.

Até aí, sem problemas. Mas o que aconteceria se esse usuário fosse consultado em um serviço externo e esta informação demorasse um pouco a chegar? Vamos fazer esta simulação usando um setTimeout de 1 segundo:

                    
    
    function pegar_usuario(){
        
        window.setTimeout(function(){
            var u = {
                'nome': 'João'
            };
            return u;
        }, 1000);
        
    }

                    
                

Desta vez, vemos um erro no console informando que a propriedade nome não pode ser lida de um objeto indefinido. Isto ocorre porque a função saudar_usuário é executada antes que a função pegar_usuario termine, portanto as informações do usuário ainda não estão disponíveis.

Este tipo de problema acontece frequentemente quando trabalhamos com AJAX, já que as informações solicitadas por serviços externos podem demorar alguns instantes para chegar. Neste caso, resolvemos este problema com o uso de uma função callback:

                    

    function pegar_usuario(callback){

        window.setTimeout(function(){
            var u = {
                'nome': 'João'
            };
            callback(u);
        }, 1000);

    }
            
    function saudar_usuario(user) {
        console.log('Olá ' + user.nome + ', como vai?');
    }
            
    pegar_usuario(saudar_usuario);

                    
                

Nós nem precisaríamos ter criado a função saudar_usuario previamente, poderíamos ter feito isso no momento de invocar a função pegar_usuario

                    

    pegar_usuario(function (user) {
        console.log('Olá ' + user.nome + ', como vai?');
    });

                    
                

Note como boa parte dos comandos jQuery se baseia em funções callback. Um exemplo:

                    

    $( "#esconder" ).click(function() {
        $(".exemplo").hide();
    });

                    
                

O próprio método setTimeout funciona com uma função callback, que é o primeiro argumento:

                    
    
    window.setTimeout(function(){},1000);

                    
                

Índice de Aulas