2

Eu tenho um script, porém ele abre assim que é carregado. Eu gostaria de fazer com que ele executasse após 10 segundos e abrisse juntamente com minha div, ela está assim:

<div id="mame">
    CONTEUDO
</div>
<script>
    var div = document.getElementById('mame');
    div.style.display = 'none';
    setTimeout(function() {
        div.style.display = 'block';
    }, 10000);
</script>

Existe algum método dele não executar na hora após o carregamento do site e esperar esses 10 segundos? Obrigado

1
  • Podes explicar melhor "e abrisse juntamente com minha div"?
    – Sergio
    6/03/2016 às 21:47

2 Respostas 2

4

Bem olhei aqui está tudo correto, funciona corretamente seu código testei no Chorme mais novo e no IE 11, talvez o resto dos códigos de sua página esteja interferindo. Porém eu tenho ressalvas para seu código que seriam:

1) Acredito que a propriedade do CSS que 'esconde' sua DIV deveria estar no próprio elemento, digo isso porque dependendo do tempo de execução do navegador, até começar a carregar o JS o conteúdo pode aparecer, e estando no próprio elemento a chance disso ocorrer é mínima. Então ficaria assim:

<div id="mame" style="display: none;">CONTEUDO</div>

2) Dependendo do tanto de conteúdo que existe na sua página fora esse códigos pode ser que o conteúdo da DIV seja ou não mostrado no tempo correto, sendo assim eu verificaria se todo o conteúdo foi executado e após isso disparava o evento de 10 segundos.

Somando essas duas observações seu código ficaria assim:

<div id="mame" style="display: none;">CONTEUDO</div>

<script>
window.onload = function() { // Espera tudo ser carregado para executar
 var div = document.getElementById("mame"); // Pega o objeto do elemento DIV

 window.setTimeout(function() { // Inicia a contagem de 10 segundos 
  div.style.display = "";  // Remove a proriedade que esta escondendo a DIV
 }, (10 * 1000)); 
}
</script>
3
  • Opa amigo. Então minha div está funcionando corretamente, só coloquei ela pra exemplificar mesmo. rs 6/03/2016 às 22:05
  • 1
    Acho que me expressei mal na pergunta. O script que eu quero que abra apos 10 segundos não é esse dai nao.. 6/03/2016 às 22:06
  • @SK15, perfeito sua resposta, estava com dúvidas quanto a isso!
    – WPfan
    21/10/2020 às 16:32
3

Uma solução é adicionar o JS dinamicamente à página.

Clique em "Executar" logo abaixo, e veja uma demonstração funcional deste código:

var delayedScript =document.createElement('script');

delayedScript.setAttribute( 'type','text/javascript');
delayedScript.setAttribute( 'src','http://codepen.io/tholman/pen/EpfLs.js' );

window.onload = function() {
  var minhaDiv = document.getElementById("mame");
  window.setTimeout( function() {
    minhaDiv .style.display = 'block';
    document.getElementsByTagName("head")[0].appendChild( delayedScript );
  }, 5 * 1000 )
}
Aguarde o Timer...
<div id="mame" style="display:none">
    <canvas id="canvas"></canvas>
</div>

O JS externo é executado somente quando o timer completa. Se precisar de algo mais específico, compensa ajustar o JS para ter maior controle, em vez de "atrasar" ele.

Créditos do JS externo: Tim Holman

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 .