setTimeout doesn't work [duplicate]

Question

This question already has answers here:

Why does the setInterval callback execute only once? (2 answers)

Closed 9 years ago.

I have made a div with id "about" with display:none and I wrote this script :

function showbox() {
    document.getElementById('about').style.display="block"
};

And added the function as an event to another div :

<div class="button" onClick="slide();setTimeout(showbox(),3000)">About</div>

So that when the user click on the div with class "button" the div with id "about" will appear after 3 seconds, the code works with the showing part but it doesn't delay anything ! Note: the function slide() exists and works perfectly and it's not interfering with anything so don't question it.

Please tell me what's wrong. Thanks.

Answer 1

showbox is all you need. Remove the ().

Answer 2

// You are *calling* showbox() here -- not passing the function ref as a parameter.
// Use this instead.

<div class="button" onClick="slide();setTimeout(showbox,3000)">About</div>

Answer 3

Better methodology: separation of concerns. Inline javascript is bad practice. Just us an event listener!

var element; //grab element however you want
element.addEventListener("click",function() {
    slide();
    setTimeout(showbox,3000);
},false);

As the others said, you need to pass a function reference to the timeout. Having the () immediately calls the function.