O favorito de todos: tempo de vídeo conceitual! Callbacks são um conceito importante em JavaScript. São funções que são chamadas quando uma ação é executada. Então, dê estrutura e tempo ao nosso código.
Veja, por exemplo, a animação que usamos no último vídeo. As animações demoram a rodar. E se você quiser que algo mais aconteça quando a animação terminar? Você precisa fazer um setTimeoutcom a mesma duração da animação? Não. jQuery nos dá funções de retorno de chamada usadas apenas para esse propósito.
Eles são normalmente um parâmetro adicional que passamos para o método. No caso da animação, passamos uma função como último parâmetro. Essa é a função de retorno de chamada e será chamada quando a animação for concluída.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Isso pode parecer meio estranho, mas basicamente estamos apenas fazendo:
.animate(a, b)Onde aé um objeto de propriedades e valores e bé uma função de retorno de chamada.
Mas sabemos, pelo último vídeo, que a animação também pode ter um parâmetro de tempo que especifica quanto tempo levará uma animação. Para onde isso vai? Esse é um parâmetro opcional, assim como a função de retorno de chamada. Se quiséssemos usá-lo, o colocaríamos bem no meio, então, essencialmente:
.animate(propertiesObject, duration, callback);E há outro parâmetro opcional também, uma string que podemos passar para especificar um valor de atenuação.
.animate(propertiesObject, duration, easing, callback);O jQuery simplesmente é legal e inteligente sobre esses parâmetros opcionais. Se você deixar de fora os dois do meio e apenas passar o retorno de chamada, ele poderá dizer que o que você está transmitindo é uma função, não um número ou string, portanto sabe que você se refere a uma função de retorno de chamada. Você não tem que passar valores falsos nem nada. Isso é apenas um bom design de API!
Quando você olha a documentação do jQuery, eles mostram isso assim:
.animado (propriedades (, duração) (, atenuação) (, completo))
Em seguida, explique os tipos esperados.
Mas de qualquer maneira, de volta aos callbacks. Você pode ficar bem aninhado. Imagine colocar outra animação na função de retorno de chamada, e essa animação tem seu próprio retorno de chamada. Isso é perfeitamente razoável, já que você pode querer fazer uma animação de várias etapas. Você só precisa se manter organizado.
Veja a Pen 450c5810be27a9a8946cb8012cbd1213 de Chris Coyier (@chriscoyier) no CodePen
Estamos usando apenas a animação como exemplo aqui. Talvez um uso ainda mais comum de funções de retorno de chamada seja Ajax. Ajax é quando o navegador chama outro recurso sem atualizar a página. Isso pode levar um tempo completamente desconhecido. Depende da largura de banda e latência e do tamanho do arquivo e condições de erro e todos os tipos de coisas. Provavelmente, você não pode fazer nada com essa solicitação Ajax até receber algo de volta ou obter mais informações. As funções de callback são perfeitas para isso, e falaremos disso mais tarde.