Entendendo Síncrono e Assíncrono em JavaScript - Parte 2
Na primeira parte deste post, vimos como o conceitos de síncrono e assíncrono são percebidos em JavaScript. Nesta segunda parte, o Sr. X aparece novamente para nos ajudar a entender como o setTimeout e o AJAX APIs trabalhos.
Um pedido estranho
Vamos voltar à história do Sr. X e do filme que você quer deixar. Digamos que você deixe uma tarefa para o Sr. X antes do passeio e diga que ele só pode começar a trabalhar nessa tarefa cinco horas depois de ele recebeu sua mensagem.
Ele não está feliz com isso, lembre-se, ele não aceita uma nova mensagem até terminar com a atual, e se ele aceita a sua, ele tem que esperar por cinco horas até mesmo começar a tarefa. Então, para não ser um desperdício de tempo, ele traz um ajudante, Sr. H.
Em vez de esperar, ele pede ao Sr. H para deixar uma nova mensagem para a tarefa na fila depois que as horas dadas passaram, e passa para a próxima mensagem.
Cinco horas passadas; Sr. H atualiza a fila com uma nova mensagem. Depois que ele processa todas as mensagens acumuladas antes do Sr. H, o Sr. X realiza sua tarefa solicitada. Assim, desta forma, você pode deixar um pedido para ser cumprido em um momento posterior, e não espere até que seja cumprido.
Mas por que o Sr. H deixa uma mensagem na fila em vez de entrar em contato direto com o Sr. X? Porque como eu mencionei na primeira parte, o só maneira de entrar em contato com o Sr. X é deixando uma mensagem para ele via telefonema - sem exceções.
1. O setTimeout () método
Suponha que você tenha um conjunto de códigos que deseja executar depois de um certo tempo. Para fazer isso, você só embrulhe-o em uma função, e adicioná-lo a um setTimeout () método juntamente com o tempo de atraso. A sintaxe de setTimeout () é o seguinte:
setTimeout (função, tempo de atraso, arg…)
o arg… parâmetro significa qualquer argumento que a função leva, e tempo de atraso deve ser adicionado em milissegundos. Abaixo você pode ver um exemplo de código simples, que gera “Ei” no console depois de 3 segundos.
setTimeout (function () console.log ('ei'), 3000); Uma vez setTimeout () começa a correr, em vez de bloquear a pilha de chamadas até que o tempo de atraso indicado seja temporizador é acionado, e a pilha de chamadas é gradualmente esvaziada para a próxima mensagem (similarmente à correspondência entre o Sr. X e o Sr. H).
Quando o temporizador expirar, uma nova mensagem junta-se à fila, e o loop de eventos o seleciona quando a pilha de chamadas fica livre após o processamento de todas as mensagens anteriores - portanto, o código é executado de forma assíncrona.
2. AJAX
AJAX (Asynchronous JavaScript and XML) é um conceito que usa o XMLHttpRequest (XHR) API para fazer solicitações do servidor e lidar com as respostas.
Quando os navegadores fazem solicitações de servidor sem usar XMLHttpRequest, atualizações de páginas e recarrega sua interface do usuário. Quando o processamento de solicitações e respostas é tratado pela API XHR e A interface do usuário permanece inalterada.
Então, basicamente, o objetivo é faça solicitações sem recargas de página. Agora, onde está o “assíncrono” nisso? Apenas usar o código XHR (que veremos daqui a pouco) não significa que é AJAX, porque a API XHR pode trabalhar de maneira síncrona e assíncrona.
XHR por padrão está configurado para trabalhar de forma assíncrona; quando uma função faz um pedido usando XHR, retorna sem esperar pela resposta.
Se o XHR estiver configurado para ser síncrono, então a função espera até o resposta é recebida e processada antes de voltar.
Exemplo de Código 1
Este exemplo apresenta um XMLHttpRequest criação de objetos. o abrir() método, valida o URL de solicitação eo mandar() método envia o pedido.
var xhr = new XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Qualquer acesso direto aos dados de resposta após mandar() será em vão, porque mandar() não espera até que a solicitação seja concluída. Lembre-se, XMLHTTPRequest está definido para trabalhar de forma assíncrona por padrão.
Exemplo de Código 2
o ola.txt O arquivo neste exemplo é um arquivo de texto simples contendo o texto 'olá'. o resposta propriedade de XHR é inválida, pois não produziu o texto 'olá'.
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // string vazia XHR implementa uma micro-rotina que continua a verificar a resposta em cada milissegundo, e desencadeia eventos complementares para os diferentes estados, um pedido é encaminhado. Quando a resposta é carregada, um evento de carregamento é acionado pelo XHR, que pode fornecer uma resposta válida.
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // escreve 'olá' no documento A resposta dentro do evento de carga saídas 'olá', o texto correto.
A maneira assíncrona é preferível, pois não bloqueia outros scripts até que a solicitação seja concluída.
Se a resposta tiver que ser processada de forma síncrona, nós passamos falso como o último argumento de abrir, qual sinaliza a API do XHR dizendo isso tem que ser síncrono (por padrão, o último argumento de abrir é verdade, que você não precisa especificar explicitamente).
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt", falso); xhr.send (); document.write (xhr.response); // escreve 'olá' para documentar Por que aprender tudo isso?
Quase todos os iniciantes cometem alguns erros com conceitos assíncronos, como setTimeout () e AJAX, por exemplo, assumindo setTimeout () executa o código após o tempo de atraso ou processando a resposta diretamente dentro de uma função, fazendo um pedido AJAX.
Se você sabe como o quebra-cabeça se encaixa, você pode evitar tal confusão. Você sabe que o tempo de atraso em setTimeout () não indica o tempo quando a execução do código começa, mas o tempo quando o temporizador expirar e uma nova mensagem é enfileirada, que só será processada quando a pilha de chamadas estiver livre para fazer isso.
