Executing JavaScript after X seconds

Question

I am building a interstitial page, using <div> and JavaScript, really simple script but neat.

Everything is working, but I also would like to close the div's after a few seconds (like 10 seconds, for example). Here what I have so far:

• I have two div's, 1 and 2.
• I have the CSS setup for div 1 like: display: none; (div 1 have the content for the splash screen)
• Div 2 is the layer that will cover the page and leave only div 1 visible.

To load the div's I have a onload function like this:

onload="document.getElementById('div1').style.display='block';document.getElementById('div2').style.display='block'"

To hide the divs I have an onclick function like this:

<a href = "javascript:void(0)" onclick = "document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='none'"></a>

How can I execute the onclick function with a timer, and how can I do it? It also has to be in JavaScript.

Answer 1

I believe you are looking for the setTimeout function.

To make your code a little neater, define a separate function for onclick in a <script> block:

function myClick() {
 setTimeout(
 function() {
 document.getElementById('div1').style.display='none';
 document.getElementById('div2').style.display='none';
 }, 5000);
}

then call your function from onclick

onclick="myClick();"

• Strelok: I don't understand, you just said you are doing it in onclick? Are we missing something?
• Paulo Capelo: Second. how can I execute the function myClick without have to use the onclick, onload, etc. I would like to start the function at the same time O load the code
• Harendra Chauhan: old question but best solution is - insert ``` myclick();``` also in script tag this will automatically trigger myclick function as soon as document started loading and as defination of function it will be executed after 5 second

Answer 2

setTimeout will help you to execute any JavaScript code based on the time you set.

Syntax

setTimeout(code, millisec, lang)

Usage,

setTimeout("function1()", 1000);

For more details, see http://www.w3schools.com/jsref/met_win_settimeout.asp

• Heretic Monkey: Note that using the overload to provide the function using a string is considered bad practice. You're better off using setTimeout(function1, 1000); or setTimeout(function() { function1(); }, 1000); or setTimeout(() => function1(), 1000); depending on the nature of this references in function1. Also, I prefer using MDN's setTimeout documentation.

Answer 3

onclick = "setTimeout(function() { document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='none'}, 1000)"

Change 1000 to the number of milliseconds you want to delay.