setTimeout doesn't work

Question

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.

The parenthesis here `setTimeout(showbox()...` invokes the function immediately. — j08691, Apr 29 '14 at 16:48
I hope the 3 seconds timer is just for testing purposes because it's terrible design to let an user click a button and not give feedback on purpose before 3 seconds. — vdavid, Apr 29 '14 at 16:51

score 3 · Answer 1 · answered Apr 29 '14 at 16:48

3

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

answered Apr 29 '14 at 16:48

Jeremy J Starcher

23,369
6
54
74

1

Why are you using code comments like that? – Sterling Archer Apr 29 '14 at 16:48
It just came out that way -- I carry over from when I do leave comments like this in real code I'm passing back to someone. – Jeremy J Starcher Apr 29 '14 at 16:50
7

then you should have used `` this is in the HTML after all ;) – rlemon Apr 29 '14 at 16:51
3

-1 for advocating inline JS events. There are better solutions, please teach them. – SomeKittens Apr 29 '14 at 17:27

score 3 · Answer 2 · answered Apr 29 '14 at 16:51

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.

answered Apr 29 '14 at 16:51

Sterling Archer

22,070
18
81
118

On the other hand, addEventListener is not supported on all browsers (unlike inline calls). Edit: see topics like http://stackoverflow.com/questions/1695376/msie-and-addeventlistener-problem-in-javascript – vdavid Apr 29 '14 at 16:53
It's supported back to IE9. For 8 and below, you use `attachEvent`. You could also use `element.onclick = function() { }` but that only allows one event to be attached. – Sterling Archer Apr 29 '14 at 16:55
@vdavid inline calls is simply bad JavaScript. It's ugly, hard to read, and the quotes can be a real pain. It's just no good. – Sterling Archer Apr 29 '14 at 16:56
I agree, but addEventListener is not an ideal solution either and is sometimes even worse since it can fail where inline would succeed. – vdavid Apr 29 '14 at 17:21
3

@vdavid I literally teach JavaScript as one of my day jobs. I disagree. One should never use inline JS events. – SomeKittens Apr 29 '14 at 17:25
1

@vdavid if you really have a valid need for that compatibility you would be better off using jQuery or something similar. Otherwise you'll be running into this kind of thing a lot. The browsers are deprecated so new code shouldn't cater to them. – Apr 29 '14 at 17:32
@SomeKittensUx2666 I must disagree with you on that point. Which is more meaningful: `` or ``? – Niet the Dark Absol Apr 29 '14 at 22:15
@NiettheDarkAbsol meaningful? – Sterling Archer Apr 29 '14 at 22:17
1

@NiettheDarkAbsol You haven't heard of 'separation of concerns', have you? – SomeKittens Apr 29 '14 at 22:18
@SomeKittensUx2666 I have, and my concern is with keeping things that work together, together. Seeing the function name in the button, I can very easily Ctrl+F through my JS files to find the function and work on it. – Niet the Dark Absol Apr 29 '14 at 22:20
@NiettheDarkAbsol it's just as easy to inspect the element and find out what events are attached. Or to track down by id, name, class, or even by tag. It's not hard at all with Ctrl+F – Sterling Archer Apr 29 '14 at 22:22
@RUJordan Granted. Actually my projects tend to defer a lot of events so there's rarely a handler on a single element, and I have a custom `addEvent` function to manage both browser compatibility and allow easier detaching of events by using a named reference instead of keeping track of the callback. – Niet the Dark Absol Apr 29 '14 at 22:25

score 2 · Accepted Answer · answered Apr 29 '14 at 16:47

2

showbox is all you need. Remove the ().

answered Apr 29 '14 at 16:47

Niet the Dark Absol

320,036
81
464
592

setTimeout doesn't work

3 Answers3