JavaScript Assíncrono

"I will finish later!"

As funções que executam em paralelo com outras funções são chamadas de assíncronas (asynchronous)

Um bom exemplo é o JavaScript setTimeout()

JavaScript assíncrono

O exemplo usado no capítulo anterior foi simplificado significativamente.

O objetivo é demonstrar a sintaxe do callback function:

Exemplo

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

Experimente você mesmo

No exemplo acima,myDisplayer é o nome da função.

é passado como parâmetro para myCalculator();。

No mundo real, os callbacks são mais frequentemente usados com funções assíncronas.

Um exemplo típico é o JavaScript setTimeout();。

Aguardando timeout

Ao usar funções JavaScript setTimeout(); Pode especificar a função de callback a ser executada no timeout:

Exemplo

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

Experimente você mesmo

No exemplo acima,myFunction é usado como callback.

função (nome da função) é passada como parâmetro para setTimeout();。

3000 é o número de milissegundos até o timeout, então será chamada após 3 segundos myFunction()。

Quando você passar uma função como parâmetro, lembre-se de não usar parênteses.

Correto: setTimeout(myFunction, 3000);

Erro: setTimeout(myFunction(), 3000);

Se não passar o nome da função como parâmetro para outra função, você sempre pode passar toda a função:

Exemplo

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {}}
  document.getElementById("demo").innerHTML = value;
}

Experimente você mesmo

No exemplo acima,function(){ myFunction("Eu amo Você !!!"); } usada como callback. É uma função completa. A função completa é passada como parâmetro para o setTimeout().

3000 é o número de milissegundos até o timeout, então será chamada após 3 segundos myFunction()。

Aguardando intervalo:

Ao usar funções JavaScript setInterval() Pode-se especificar a função de callback a ser executada em cada intervalo:

Exemplo

setInterval(myFunction, 1000);
function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML =
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

Experimente você mesmo

No exemplo acima,myFunction usada como callback.

função (nome da função) é passada como parâmetro para setInterval()。

1000 é o número de milissegundos entre os intervalos, então myFunction() Será chamada a cada segundo.

Aguardando arquivo

Se você criar uma função para carregar recursos externos (como scripts ou arquivos), você não pode usar esses conteúdos antes do carregamento completo.

Esta é a melhor oportunidade para usar callbacks.

Neste exemplo, carrega-se um arquivo HTML (mycar.htmle, após o carregamento completo do arquivo, exibir o arquivo HTML na página:

Aguardando arquivo:

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Erro: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

Experimente você mesmo

No exemplo acima,myDisplayer usada como callback.

função (nome da função) é passada como parâmetro para getFile()。

A seguir está mycar.html cópia de:

mycar.html

<img src="img_car.jpg" alt="Bom carro" style="largura:100%">
<p>Um carro é um veículo motorizado autopropulsionado rodado, usado para transporte.</p>
<p>Mais definições do termo especificam que os carros são projetados para rodar principalmente em estradas, para ter assentos para uma a oito pessoas, e tipicamente ter quatro rodas.</p>
<p>(Wikipedia)</p>