Timeout inside a function (javascript)

Question

I've this code:

function divHideShow(divToHideOrShow) 
{
    var div = document.getElementById(divToHideOrShow);

    if (div.style.display == "none") 
    {
        div.style.display = "block";
    }
    else 
    {
        div.style.display = "none";
    }

}

How to make it wait 2 seconds when executing div.style.display = "block"; ?

Thanks

Do you want to wait 2 seconds before setting to block, or after? — Herms
– Herms, Commented Jun 3, 2013 at 14:55

clinton3141 · Accepted Answer · 2013-06-03 15:01:27Z

3

You can use the function setTimeout to wait for a specified time (in milliseconds) before running some code.

function divHideShow(divToHideOrShow) 
{
    var div = document.getElementById(divToHideOrShow);

    if (div.style.display == "none") 
    {
        setTimeout(function () {
            div.style.display = "block";
        }, 2000);
    }
    else 
    {
        div.style.display = "none";
    }

}

It might be worth considering adding and removing a class rather than setting the style directly. You can then handle all styles using CSS which helps with maintainability (and you can use CSS3 animations to fade/grow/shrink things in and out too).

edited Jun 3, 2013 at 15:01

answered Jun 3, 2013 at 14:56

clinton3141

4,8423 gold badges36 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Herms Over a year ago

display=none on the element directly seems fine to me, but I'd say instead of doing display=block to re-show it, just clear the display style. That way you can define other display types in CSS (inline-block, float, etc) and this won't clobber it.

Recif Over a year ago

Thanks iblamefish! :-) It does its job!

pinkpanther Over a year ago

@Recif when you think it answers your question... you should accept the answer so that answerer gets some encouragement

pinkpanther · Accepted Answer · 2013-06-04 18:33:00Z

2

This answers you question: the second parameter of setTimeout takes milliseconds so, 2000 milliseconds= 2 seconds

function divHideShow(divToHideOrShow) 
{
    var div = document.getElementById(divToHideOrShow);

    if (div.style.display == "none") 
    {
        setTimeout(function(){div.style.display = "block";},2000);

    }
    else 
    {
        div.style.display = "none";
    }

}

If you need fadeIn or fadeOut effects you better consider using jquery library:

You need to include jquery library in order this to be working.....

function divHideShow(divToHideOrShow) 
{

     var time=600;  //milli seconds alter this for changing speed
     $("#"+divToHideOrShow).fadeToggle(time);

}

edited Jun 4, 2013 at 18:33

answered Jun 3, 2013 at 14:53

pinkpanther

4,8083 gold badges41 silver badges63 bronze badges

11 Comments

Herms Over a year ago

No, that doesn't work at all. setTimeout will run the second argument after the timeout, it won't delay the rest of the code.

Herms Over a year ago

2000 microseconds == 0.002 seconds. That argument is milliseconds, where 2000 milliseconds == 2 seconds.

pinkpanther Over a year ago

@Herms My badness, I typed microseconds though I intended milliseconds

pinkpanther Over a year ago

how would it? I didn't implement it... I've suggested you :) I will add the example to the answer if you need though :)

pinkpanther Over a year ago

@Recif do you know about jquery in first place?

|

Collectives™ on Stack Overflow

Timeout inside a function (javascript)

2 Answers 2

3 Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related