Add a delay to JavaScript function [duplicate]

Question

I'm trying to understand where to add code to delay the toggle of my div by 0.5 seconds. I am a beginner with JavaScript/jQuery.

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

//it is tied to this if it can help

<a onclick="toggle_visibility('section1_1_content');toggle_visibility('note1_1');"> <div id="help_tiem_section1_1" onclick="chngimg1()" onmouseover="this.style.cursor='pointer'">
            <p1>TEST</p1><img src="down.png" height="10px" width="15px" id="imgplus1"/>
        </div></a>

This works. However, I'd like to change it so that when it changes back to display none it does not delay.

I put the subject title into google and came up with plenty of results. Please put a little research effort in before asking questions — charlietfl
– charlietfl, Commented Jan 12, 2015 at 14:28

BeNdErR · Accepted Answer · 2015-01-12 14:27:45Z

3

use setTimeout():

setTimeout(yourFunction, 500)

answered Jan 12, 2015 at 14:27

BeNdErR

18k21 gold badges79 silver badges106 bronze badges

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

Comments

jcubic · Accepted Answer · 2015-01-13 21:55:04Z

0

You should use setTimeout

function toggle_visibility(id) {
   setTimeout(function() {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }, 500);
}

Update:

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') {
        setTimeout(function() {
            e.style.display = 'none';
        }, 500);
    } else {
        e.style.display = 'block';
    }
}

edited Jan 13, 2015 at 21:55

answered Jan 12, 2015 at 14:29

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

4 Comments

Wilfredo P Over a year ago

I think that never will run, you are missing );

jcubic Over a year ago

@WilfredoP added missing characters.

joey Over a year ago

@jcubic This works however how do I change it so that when it changes back to display none it does not delay. Thanks a lot!

jcubic Over a year ago

@joey simply wrap only one if branch with setTimeout.

Collectives™ on Stack Overflow

Add a delay to JavaScript function [duplicate]

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related