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.

score 134 · Accepted Answer · edited Apr 29 '20 at 11:52

134

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();"

edited Apr 29 '20 at 11:52

str

42,689
17
109
127

answered Nov 24 '11 at 05:38

Strelok

50,229
9
102
115

I don't understand, you just said you are doing it in onclick? Are we missing something? – Strelok Nov 24 '11 at 05:49
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 – Paulo Capelo Nov 24 '11 at 05:51
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 – Harendra Chauhan Apr 25 '20 at 16:53

score 15 · Answer 2 · edited May 02 '17 at 17:50

15

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

edited May 02 '17 at 17:50

Peter Mortensen

30,738
21
105
131

answered Nov 24 '11 at 05:40

Selvakumar Ponnusamy

5,363
7
40
78

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](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout). – Heretic Monkey Dec 28 '20 at 16:52

score 5 · Answer 3 · answered Nov 24 '11 at 05:37

5

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.

answered Nov 24 '11 at 05:37

Dogbert

212,659
41
396
397

Executing JavaScript after X seconds

3 Answers3

Linked

Related