Por que você precisa de assíncrono? Por que? Vamos ver um pedaço de código.
Pergunta 1:
para (var i = 0; i <100000; i ++) {} alert ('Olá mundo !!!');Este código significa executar 100 vezes antes de executar o Alert. O problema que isso traz é que ele bloqueia seriamente a execução do código subsequente. Quanto ao porquê, é principalmente porque o JS é um único thread.
Pergunta 2:
Geralmente precisamos resolver esse problema. Se precisarmos adicionar código de script à cabeça, geralmente escreveremos o código no window.onload (se o DOM for operado). Você já pensou sobre por que precisamos adicionar window.onload ? O motivo é que, quando você está operando o DOM, o navegador HTML por trás do script não começou a carregar, mas você pensa em se casar com ela antes de ela nascer. Isso é possível? Claro que é impossível, adicione janela. O motivo pelo qual onload pode ser porque o código na window.onload .
Pergunta 3:
Às vezes, a página não precisa carregar todo o código de uma só vez, mas com mais frequência carregamos apenas uma determinada peça de código de acordo com um determinado requisito.
O que é um único thread?
Você pode entender dessa maneira que um único thread é a execução de segmentos de código, executando primeiro o anterior e depois executando o próximo após o preenchimento anterior.
Então, qual JS é assíncrono?
Eu acredito que essa coisa é quase usada mal. É Settimeout/SetInterval e, claro, Ajax. Eu acredito que todo mundo conhece o Ajax assíncrono. Claro, também pode ser síncrono, mas ninguém faz assim. No entanto, alguns amigos podem não saber de maneira diferente sobre o Settimeout e o SetInterval sendo assíncrono. Vamos falar sobre por que o setTimeout é assíncrono.
setTimeout (function () {console.log (0);}, 0) console.log (1); // 1 // 0 Depois de executar esse código, a primeira impressões 1 em vez de 0. Alguns amigos começam a se confundir? Embora tenhamos definido o setTimeout para executar console.log(0) após 0 segundos, o setTimeout é muito especial porque é assíncrono. Vamos deixar de lado por que a impressão é 1 e depois 0. Vamos falar sobre o que é assíncrono.
O que é assíncrono?
Por exemplo, em alguns restaurantes, você precisa fazer reservas com antecedência e só pode ir quando outros terminarem de comer. Portanto, quando outros estão comendo, você pode fazer outras coisas. Quando outros terminarem de comer, alguém o notificará, para que você possa ir. Para o código, como Ajax, você define um método de retorno de chamada. Esse método de retorno de chamada não será executado no momento, mas aguardará a conclusão da resposta do servidor antes de executar este código.
Vamos voltar para a seção anterior do setTimeout. Funciona assim. A partir do momento em que você define o setTimeout (independentemente de o tempo é 0 ou não), o JS não executará diretamente esse código, mas o jogará em uma fila de eventos. Somente depois de todas as tarefas de sincronização na página, o código na fila de eventos será executado. O que é sincronização? Além do código assíncrono, é sincronização -_-.
Como implementar JS assíncrono?
1. Use o settimout para obter assíncrono
setTimeout (function () {console.log (document.getElementByTagName ('body') [0]);}, 0)Mas há um pequeno problema com o Settimeout, que é o tempo é impreciso. Se você deseja executar esse código mais rapidamente, podemos usar uma função fornecida pelo HTML5.
requestanimationframe (function () {console.log (document.getElementByTagName ('body') [0]);})A diferença entre o requestanimationframe e o setTimeout é que o requestanimationframe é executado mais rápido que o setTimeout , muitas pessoas usam o requestanimationframe para criar animações.
2. Crie dinamicamente tags de script
var head = document.getElementByTagName ('head') [0]; var script = document.createElement ('script'); script.src = 'mengzhuzi.js'; head.appendchild ('script');3. Use o adiente/assíncrono fornecido pelo script
<script src = "xx.js" adiar> </script>
adiar: este código é executado somente após a carga da página.
<script src = "xx.js" Async> </script>
ASYNC: execute o código de script de forma assíncrona
No entanto, assíncrono também é uma desvantagem, como o seguinte código:
Código normal:
Tente {Throw New Error ('Hello World');} Catch (err) {Console.log (err);} // Erro: Hello World (…)Código assíncrono:
tente {settimout (function () {tiro novo erro ('hello world');}, 0)} catch (err) {console.log (err);} // referenceError: settimout não está definido (…)Pode -se descobrir que o código na captura não é executado, o que significa que a tentativa não pode capturar o código no assíncrono.
Resumir
O assíncrono em JS e como conseguir isso acaba basicamente. É um clichê sobre o JS assíncrono, mas ainda espero que o conteúdo deste artigo seja útil para todos.