Script open only after given time

Question

I have a script, but it opens as soon as it is loaded. I’d like to have him run after 10 seconds and open along with my div, she’s like this:

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

Is there any method of it not running in the hour after loading the site and wait those 10 seconds? Thank you

Answer 1

Well I looked here everything is correct, it works correctly your code tested in the newest Chorme and in the IE 11, maybe the rest of the codes of your page is interfering. But I have reservations for your code that would be:

1) I believe that the CSS property that 'hides' your DIV should be in the element itself, I say this because depending on the running time of the browser, until you start loading the JS the content may appear, and being in the element itself the chance of this occurring is minimal. Then it would look like this:

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

2) Depending on how much content there is on your page outside that code may or may not be the content of the DIV shown in the correct time, so I would check if all the content was executed and after that triggered the event of 10 seconds.

Adding these two observations together your code would look like this:

<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>

Answer 2

One solution is to dynamically add JS to the page.

Click "Run" below, and see a functional demonstration of this code:

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>

The external JS runs only when the timer complete. If you need something more specific, it pays to adjust the JS to have greater control, rather than "delay" it.

Credits from the external JS: Tim Holman