How to add sleep or wait for JS using JS or jQuery?

Question

How to add sleep from this function ShowSC()

function ShowSC(){
 $("#SC").html('LOADING');
 //adding the sleep 1 second
 $("#SC").html('<img src="secure/captcha/securimage_show.php" class="img_middle" />');
}

ADVANCE THANKS!

Sorry, I can't find a solution from other question so I just start a question here.

You must be kidding `:)` one cannot miss setTimeout() function when dealing with javascript ! — Stphane, Oct 22 '13 at 14:22
possible duplicate of [What do I do if I want a JavaScript version of sleep()?](http://stackoverflow.com/questions/951021/what-do-i-do-if-i-want-a-javascript-version-of-sleep) — Stphane, Oct 22 '13 at 14:23
Just to clarify, if your intention is to freeze the code for 1 second, and then continue in the same function, A) Javascript will probably fight you all of the way and it won't be easy, B) Your UI experience will be very annoying. setTimeout is fine to use; I just want to make sure you realize it works differently from how Thread.sleep() might in other languages. — Katana314, Oct 22 '13 at 14:25

score 5 · Answer 1 · answered Oct 22 '13 at 14:22

5

You can use setTimeout, it executes a function, once, after waiting a specified number of milliseconds

function ShowSC(){
     $("#SC").html('LOADING');

     //adding the sleep 1 second
     setTimeout(function(){
        $("#SC").html('<img src="secure/captcha/securimage_show.php" class="img_middle" />');
     }, 1000);
}

Here 1000 is in milliseconds

answered Oct 22 '13 at 14:22

Satpal

126,885
12
146
163

1

I thought this is very hard. Thanks for help. – Momar Oct 22 '13 at 14:27
Downvoter care to comment – Satpal Oct 25 '13 at 10:38

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

The jQuery Way™ is to use delay and queue:

$('#SC')
    .html('LOADING')
    .delay(1000)
    .queue(function (n) {
        $(this).html('<img src="secure/captcha/securimage_show.php" class="img_middle" />');
        n();
    });

It helps maintain chainable code, which can tend to be more readable. Readable code is easier to maintain and extend.

The vanilla JavaScript way is to use a callback in setTimeout:

$('#SC').html('LOADING');
setTimeout(function () {
    $('#SC').html('<img src="secure/captcha/securimage_show.php" class="img_middle" />');
}, 1000);

Chaining setTimeout calls within setTimeout calls can end up with callback arrow code, so I generally recommend making use of queueing even if you're not using jQuery. You'd want to make use of some sort of queueing.

_{The following example makes use of a Queue class that I wrote:}

(function () {
    var sc,
        q;
    q = new Queue();
    sc = document.getElementById('SC');
    sc.innerHTML = 'LOADING';
    q.queue(function (n) {
        setTimeout(n, 1000);
    },function (n) {
        sc.innerHTML = '<img src="secure/captcha/securimage_show.php" class="img_middle" />';
        n();
    });
}());

thanks for helping me, brother. I have picked lot of learnings from you. ^_^ you are friendly and interested to help more people. — Momar, Oct 22 '13 at 14:35

How to add sleep or wait for JS using JS or jQuery?

2 Answers2