"Terminarei mais tarde!"
Funções executadas em paralelo com outras funções são chamadas de assíncronas
Um bom exemplo é JavaScript setTimeout()
Os exemplos usados no capítulo anterior foram muito simplificados.
O objetivo dos exemplos foi demonstrar a sintaxe das funções de retorno de chamada:
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
</html>
No exemplo acima, myDisplayer é o nome de uma função.
É passado para myCalculator() como argumento.
No mundo real, os retornos de chamada são usados com mais frequência com funções assíncronas.
Um exemplo típico é JavaScript setTimeout().
Ao usar a função JavaScript setTimeout(), você pode especificar uma função de retorno de chamada a ser executada no tempo limite:
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setTimeout() with a Callback</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
</script>
</body>
</html>
No exemplo acima, myFunction é usado como retorno de chamada.
myFunction é passado para setTimeout() como um argumento.
3000 é o número de milissegundos antes do tempo limite, então myFunction() será chamado após 3 segundos.
Ao passar uma função como argumento, lembre-se de não usar parênteses.
Certo: setTimeout(myFunction, 3000);
Errado: setTimeout(myFunction(), 3000);
Em vez de passar o nome de uma função como argumento para outra função, você sempre pode passar uma função inteira:
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
</script>
</body>
</html>
No exemplo acima, function(){ myFunction("I love You !!!"); } é usado como retorno de chamada. É uma função completa. A função completa é passada para setTimeout() como argumento.
3000 é o número de milissegundos antes do tempo limite, então myFunction() será chamado após 3 segundos.
Ao usar a função JavaScript setInterval(), você pode especificar uma função de retorno de chamada a ser executada para cada intervalo:
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>
<p>Using setInterval() to display the time every second (1000 milliseconds).</p>
<h1 id="demo"></h1>
<script>
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
</script>
</body>
</html>
No exemplo acima, myFunction é usado como retorno de chamada.
myFunction é passado para setInterval() como um argumento.
1000 é o número de milissegundos entre intervalos, então myFunction() será chamado a cada segundo.
Com a programação assíncrona, os programas JavaScript podem iniciar tarefas de longa duração, e continue executando outras tarefas em paralelo.
Porém, os programas assíncronos são difíceis de escrever e difíceis de depurar.
Por causa disso, a maioria dos métodos JavaScript assíncronos modernos não usam retornos de chamada. Em vez disso, em JavaScript, a programação assíncrona é resolvida usando Promessas.
Você aprenderá sobre promessas no próximo capítulo deste tutorial.