I have

<script>
function myfunc(){
alert("show this alert in 5000ms after toggleClass executed")
//some code goes here
}

$(document).ready(function(){
    $('.mybtn').on('click',function(){
        $('#mydiv').toggleClass('newclass');
    });
 });
</script>

How to execute myfunc() in 5000ms after toggleClass was executed? Tried several ways but with no luck.

Thank you.

I have

<script>
function myfunc(){
alert("show this alert in 5000ms after toggleClass executed")
//some code goes here
}

$(document).ready(function(){
    $('.mybtn').on('click',function(){
        $('#mydiv').toggleClass('newclass');
    });
 });
</script>

How to execute myfunc() in 5000ms after toggleClass was executed? Tried several ways but with no luck.

Thank you.

• javascript
• jquery
• function
• events
• delay

5 Answers 5

use setTimeout()

function myfunc() {
    alert("show this alert in 5000ms after toggleClass executed")
    //some code goes here
}

$(document).ready(function () {
    $('.mybtn').on('click', function () {
        $('#mydiv').toggleClass('newclass');
        setTimeout(myfunc, 5000)
    });
});

Try this...

function myfunc(){
alert("show this alert in 5000ms after toggleClass executed");
//some code goes here
}

$(document).ready(function(){
    $('.mybtn').on('click',function(){
        $('#mydiv').toggleClass('newclass').delay(5000).queue(myfunc);        
    });
});

JSFIDDLE DEMO

Use settimeout function

function myfunc() {
    alert("show this alert in 5000ms after toggleClass executed")
    //some code goes here
}

$(document).ready(function () {
    $('.mybtn').on('click', function () {
        $('#mydiv').toggleClass('newclass');
        setTimeout(myfunc, 5000)
    });
});

You can have a callback function like this

$('#mydiv').toggleClass('newclass', 5000).promise().done(function(){alert("done")});

Here is a working demo

I would do the $("#mydiv").toggleClass('newclass') in a separate event.

For instance <button class="mybtn" onmousedown="$('#mydiv').toggleClass('newclass')" onclick="myfunc();">Fast Toggle</button>

If you toggle onmousedown the page will render with the toggle before the click event fires.