27

Gostaria de entender porque, quando usamos as funções alert, confirm ou prompt, as mesmas sempre causam uma espécie de "congelamento" na tela.

Por exemplo, eu tenho um alerte, em seguida, tenho uma div com um estilo definido. O estilo da div só ficará visível depois que eu fechar o alert.

<script>alert('oi')</script>
<div style="background-color: black;height: 50px">
  
</div>

Pensava que se travava da ordem como as coisas foram definidas, mas parece que não é bem isso:

<div style="background-color: black;height: 50px"></div>

<script>alert('oi')</script>

Eu já notei também que, em outros casos, quando você tem uma definição dinâmica de criação de elementos, a mesma coisa acontece.

No exemplo abaixo, eu já tenho um elemento criado, porém, depois de um tempo, eu crio outro dinamicamente e, em seguida, chamo a função confirm.

setTimeout(function () {
  
  var div = document.createElement('div');
  div.innerHTML = 'Nova div';
  document.body.appendChild(div) 
  confirm('oi')
}, 200)
<div style="background-color: black;height: 50px"></div>

O resultado é que, mesmo eu definindo document.body.appendChild antes de confirm, o appendChild parece ser executado apenas depois do fechamento de confirm.

  • Por que os diálogos nativos do Javascript "travam" o processo de criação de elementos e definições de estilo?

  • Tendo em vista que as vezes isso causa um "brancão" indesejado na tela, como eu poderia chamar alert, confirm ou prompt sem que isso interfira no carregamento da página?

5 Respostas 5

22

Por que “alert”, “confirm” e “prompt” travam o carregamento?

Porque é uma caracteristica da linguagem...

Essa funcionalidade foi criada assim, no tempo dos dinossauros, e não mudou mais porque toda a gente sabe que funciona assim e mudar isso iria quebrar código que conta com essa característica da linguagem. Como o JavaScript corre num thread único e esses métodos esperam resposta do utilizador, tudo pára à espera da ação do utilizador.

A razão pela qual o estilo não é mostrado é porque o HTML não é mostrado antes do JavaScript ser lido. Não aparece estilo, nem conteúdo. É a maneira como o browser monta a página. (exemplo)

6
  • 5
    Mas por que, no segundo caso, o alert é exibido antes da DIV?
    – Jéf Bueno
    Commented 18/11/2016 às 13:36
  • @jbueno tem a ver com a maneira do browser montar a página, juntei um exemplo.
    – Sergio
    Commented 18/11/2016 às 13:43
  • 1
    @Sergio Aproveitando, neste update do seu exemplo eu altero a cor pelo próprio JS. Mas mesmo assim ele não altera a cor. É o mesmo motivo de renderizar o HTML primeiro?
    – Randrade
    Commented 18/11/2016 às 13:59
  • 1
    @Randrade exato. O JavaScript já sabe que a cor mudou mas o browser ainda não chegou ao momento de renderizar a página.
    – Sergio
    Commented 18/11/2016 às 14:35
  • 1
    1 ano se passou e ninguém notou o "dinaussauros" né @Sergio :D Commented 12/12/2017 às 18:23
9

Isso acontece porque o JS original é síncrono e o JS precisa travar a execução no confirm, por exemplo, para que o seu resultado seja colocado na variável e que possa ser usado logo na linha de baixo.

Sobre a segunda pergunta: o browser é divido em várias partes, uma delas é a engine de JS e outra é a parte que desenha as coisas na tela. Elas não são síncronas. O JS pode ter mandado aparecer algo na tela, mas o browser só vai desenhar mesmo na tela quando acontecer o próximo refresh, e isso depende de várias coisas, incluindo a capacidade do dispositivo de desenhar coisas na tela rapidamente.

Existe uma função nova requestAnimationFrame que permite executar uma função junto quando o browser está fazendo o refresh.

8

Acho que as respostas postadas já respondem bem. Só para complementar, como alternativa pode criar um diálogo seu que não bloqueie. Em geral usará WebWorkers ou Promisses. O que agora tem se tornando bem padrão.

O jQuery faz isso.

Coloquei no GitHub para referência futura.

2
  • Uma pequena gambiarra com setTimeout pode vir a calhar :p Commented 18/11/2016 às 13:52
  • Pensei em postar algo assim, mas como não sabia se tinha algum problema que fizesse isso não ser a melhor ideia, preferi deixar sem.
    – Maniero
    Commented 18/11/2016 às 13:56
7

Na verdade esse comportamento depende do browser que voce está a usar.

Vou passar a descrever o comportamento para os browsers mais usados:

Chrome(1) - Chrome Version 54.0.2840.99 m (64-bit)

Firefox(2) - Firefox 49.0.2

Edge(3) - Microsoft Edge 38.14393.0.0

Opera(4) - Opera 41.0.2353.56

IE(5) - Internet explorer 11.447.14393.0

Safari(6) - Safari 5.1.7 (7534.57.2)

Chrome no android(7) - Chrome 53.0.2785.124

Era para ter testado também com o firefox no android e com o safari no ios mas nao é possivel correr o código de snippets do stackexchange neles.

Cenário 1 - <script> antes de <div> - Todos os browsers tem comportamento identico

Cenário 2 - <div> antes de <script>

  1. Mostra a mensagem. Bloqueia. Mostra a div

  2. Mostra os dois práticamente ao mesmo tempo

  3. Mostra os dois práticamente ao mesmo tempo

  4. Mostra a mensagem. Bloqueia. Mostra a div

  5. Mostra os dois práticamente ao mesmo tempo

  6. Mostra a mensagem. Bloqueia. Mostra a div

  7. Mostra a mensagem. Bloqueia. Mostra a div

Cenário 3 - Com timeout. todos os browsers tem o mesmo comportamento.

Podemos entao concluir que últimamente depende da implementacao do engine de javascript do browser / carregamento do DOM no cenário 2.

Uma pergunta bastante relacionada a esta na comunidade inglesa, pergunta onde a gente deve de meter blocos de <script> no html.

A resposta que foi dada é que deve ser no final do documento html para o dom ser carregado. e no seu javascript poder aceder a qualquer elemento da sua página.

Ou seja se o dom for carregado e apresentado antes do seu script (como acontece no firefox edge e ie) voce tem o comportamento descrito (em que aparecem os dois ao mesmo tempo), senao o browser interpreta o script e corre-o.

3
  • Acho uma boa iniciativa você ter feito testes. O único problema nesse caso é que daqui a 3 ou 6 meses sua resposta já poderá estar obsoleta. Commented 18/11/2016 às 18:31
  • @WallaceMaxters Eu sei que pode. Mas ninguem nas respostas referiu que o comportamento pode ser diferente dependendo da versao do browser. Commented 18/11/2016 às 18:32
  • Foi exatamente esse o ponto que eu gostei. O Javascript e o Css sempre tem esses probleminhas de variação de acordo com os browsers. Commented 18/11/2016 às 18:33
4

Porque essa funções a que se refere, internamente possuem um conjunto de sub-rotinas e uma delas é : "Para tudo! Mostra o Alert e espera uma entrada do usuário", e cada uma terá seu comportamento peculiar...

2
  • alert não espera a entrada do usuário, a não ser que você seja considerando o click em "ok". Talvez a palavra correta fosse "iteração do usuário" :p Commented 18/11/2016 às 13:46
  • 1
    Não, é entrada mesmo... A Computação é inteira é baseada em I/O, input/output, entrada/saída...Nesse caso estou considerando o "ok", o "x" e o "checkbox" como entradas, mas como citado pelo @bigown, se vc criar o seu poderá ser até o movimento do mouse, ou num futuro ultrapassado o "Piscar do olhos"....
    – MagicHat
    Commented 18/11/2016 às 13:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .