Quando o JavaScript é síncrono?

Eu tenho a impressão de que o JavaScript sempre foi asynchronous. No entanto, aprendi que há situações em que não é (ou seja, manipulações DOM). Existe uma boa referência em qualquer lugar sobre quando será síncrona e quando será assíncrona? O jQuery afeta isso tudo?

JavaScript é sempre síncrono e single-threaded. Se você estiver executando um bloco de código JavaScript em uma página, nenhum outro JavaScript nessa página será executado no momento.

JavaScript é apenas asynchronous no sentido de que pode fazer, por exemplo, chamadas Ajax. A chamada Ajax irá parar a execução e outro código será capaz de executar até que a chamada retorne (com sucesso ou não), ponto em que o retorno de chamada será executado de forma síncrona. Nenhum outro código será executado neste momento. Não irá interromper nenhum outro código em execução no momento.

Timers JavaScript operam com esse mesmo tipo de retorno de chamada.

Descrever JavaScript como asynchronous talvez seja enganoso. É mais correto dizer que o JavaScript é síncrono e de segmentação única com vários mecanismos de retorno de chamada.

jQuery tem uma opção em chamadas Ajax para torná-las sincronizadas (com a opção async: false ). Os iniciantes podem se sentir tentados a usar isso incorretamente porque permite um modelo de programação mais tradicional ao qual se pode estar mais acostumado. A razão pela qual é problemático é que esta opção irá bloquear todo o JavaScript na página até que ela termine, incluindo todos os manipuladores de events e timers.

O JavaScript é de encadeamento único e possui um modelo de execução síncrona. Single threaded significa que um comando está sendo executado por vez. Síncrono significa um de cada vez, ou seja, uma linha de código está sendo executada no momento em que o código aparece. Então, em JavaScript, uma coisa está acontecendo de cada vez.

Contexto de Execução

O mecanismo JavaScript interage com outros mecanismos no navegador. Na pilha de execução de JavaScript, há contexto global na parte inferior e, quando invocamos funções, o mecanismo JavaScript cria novos contextos de execução para as respectivas funções. Quando a function chamada sai, seu contexto de execução é exibido a partir da pilha e, em seguida, o contexto de execução seguinte é exibido e assim por diante …

Por exemplo

 function abc() { console.log('abc'); } function xyz() { abc() console.log('xyz'); } var one = 1; xyz(); 

No código acima, um contexto de execução global será criado e, nesse contexto, var one será armazenado e seu valor será 1 … quando a chamada xyz () for chamada, um novo contexto de execução será criado e se tivermos definido qualquer variável na function xyz essas variables ​​seriam armazenadas no contexto de execução de xyz (). Na function xyz, chamamos abc () e, em seguida, o contexto de execução abc () é criado e colocado na pilha de execução … Agora, quando abc () termina seu contexto é retirado da pilha, o contexto xyz () é exibido pilha e, em seguida, o contexto global será exibido …

Agora sobre retornos de chamada asynchronouss; Assíncrono significa mais de um de cada vez.

Assim como a pilha de execução, há a fila de events . Quando queremos ser notificados sobre algum evento no mecanismo de JavaScript, podemos ouvir esse evento e esse evento é colocado na fila. Por exemplo, um evento de solicitação do Ajax ou um evento de solicitação de HTTP.

Sempre que a pilha de execução está vazia, como mostrado no exemplo de código acima, o mecanismo JavaScript observa periodicamente a fila de events e vê se há algum evento para ser notificado. Por exemplo, na fila, havia dois events, um pedido de ajax e um pedido de HTTP. Ele também procura ver se há uma function que precisa ser executada nesse acionador de evento … Portanto, o mecanismo JavaScript é notificado sobre o evento e conhece a respectiva function a ser executada nesse evento … Portanto, o mecanismo JavaScript chama a function function manipuladora, no caso de exemplo, por exemplo, AjaxHandler () será invocada e como sempre quando uma function é invocada seu contexto de execução é colocado no contexto de execução e agora a execução da function é finalizada e a requisição de evento ajax também é removida da fila de events … Quando AjaxHandler () termina a pilha de execução está vazia, então o mecanismo novamente examina a fila de events e executa a function de manipulador de events da solicitação HTTP, que foi a próxima na fila. É importante lembrar que a fila de events é processada apenas quando a pilha de execução está vazia.

Por exemplo, veja o código abaixo explicando a pilha de execução e a manipulação da fila de events pelo mecanismo Javascript.

 function waitfunction() { var a = 5000 + new Date().getTime(); while (new Date() < a){} console.log('waitfunction() context will be popped after this line'); } function clickHandler() { console.log('click event handler...'); } document.addEventListener('click', clickHandler); waitfunction(); //a new context for this function is created and placed on the execution stack console.log('global context will be popped after this line'); 

E

        

Agora, execute a página da Web, clique na página e veja a saída no console. A saída será

 waitfunction() context will be popped after this line global context will be emptied after this line click event handler... 

O mecanismo JavaScript está executando o código de forma síncrona, conforme explicado na parte do contexto de execução, o navegador está colocando de forma assíncrona as coisas na fila de events. Portanto, as funções que levam muito tempo para serem concluídas podem interromper o tratamento de events. As coisas que acontecem em um navegador como events são tratadas desta forma pelo JavaScript, se houver um ouvinte a ser executado, o mecanismo o executará quando a pilha de execução estiver vazia. E os events são processados ​​na ordem em que acontecem, de modo que a parte assíncrona é sobre o que está acontecendo fora do mecanismo, ou seja, o que o mecanismo deve fazer quando esses events externos ocorrem.

Então JavaScript é sempre síncrono.

JavaScript é single-threaded, e todo o tempo você trabalha em uma execução normal de stream de código síncrono.

Bons exemplos do comportamento asynchronous que o JavaScript pode ter são events (interação do usuário, resultados de solicitações do Ajax, etc) e timers, basicamente ações que podem acontecer a qualquer momento.

Eu recomendaria que você desse uma olhada no seguinte artigo:

  • Como funcionam os timeres de JavaScript

Esse artigo ajudará você a entender a natureza de segmento único do JavaScript e como os cronômetros funcionam internamente e como a execução de JavaScript assíncrona funciona.

asynchronous http://sofpt.miximages.com/jquery/427px-Timers.png