Add a delay to JavaScript function

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.

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout — scniro, Jan 12 '15 at 14:26
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, Jan 12 '15 at 14:28

score 3 · Answer 1 · answered Jan 12 '15 at 14:27

3

use setTimeout():

setTimeout(yourFunction, 500)

answered Jan 12 '15 at 14:27

BeNdErR

17,471
21
72
103

jcubic · Answer 2 · 2015-01-13T21:55:04.280

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 '15 at 21:55

answered Jan 12 '15 at 14:29

jcubic

61,973
54
229
402

I think that never will run, you are missing `);` – Wilfredo P Jan 12 '15 at 14:31
@WilfredoP added missing characters. – jcubic Jan 12 '15 at 14:34
@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! – joey Jan 12 '15 at 14:40
@joey simply wrap only one if branch with setTimeout. – jcubic Jan 13 '15 at 21:55

Add a delay to JavaScript function

2 Answers2