Synchronous Sleep function in Javascript

Question

I want to simulate a progress bar using JS/JQuery, this is my HTML code :

<p id="percentage">0%</p>

I want to go from 0 to 100 and see -Visually- the progress in slow motion, So What I need exactly is a For Loop and a pause function, but unfortunately there is no sleep-like function in Javascript

1st try :

After doing some research, I found the setTimeOut function in Jquery, you can find herein the Javascript code :

for (i = 0; i < 100; i++) { 
    setTimeout(function() {
        $("#percentage").text(i+"%");
    }, 1000);
}

But unlikely, this won't work, because according to the documentation the setTimeout function is asynchronous, and the execution of the Javascript will continue. That means that there is no pause-like behavior, and the progress bar will go from 0 to 100 after 1000ms instead of going from 0 to 1.

2nd try :

While setTimeout can't solve my problem, I tried to implement my own sleep() function, and here it is :

function sleep(ms){
    var waitTimeInMilliseconds = new Date().getTime() + ms;
    while(new Date().getTime() < waitTimeInMilliseconds ) true;
}

While I was thinking that this is the silver bullet to this scenario -It was a bad Idea, I know-, I was surprised since also this approach didn't solve my problem, and the interface remains Idle during the sleep time, (I cannot click, select or do anything in my HTML page).

How can I solve this problem ?

Use setTimeout() the way it was intended to be used. Start a timer, and in the handler make the change you want to make and then start the timer again. Keep doing that until there are no more incremental changes. — Pointy
– Pointy, Commented Nov 17, 2014 at 16:14
First part of your problem: stackoverflow.com/questions/750486/…, but there are better ways to implement it. — epascarello
– epascarello, Commented Nov 17, 2014 at 16:15
Nitpick, but this the title of the question should be changed. All answers are for asynchronous sleep() because asker actually wants asynchronous sleep(); this is a red herring for people actually looking for a synchronous sleep(), e.g. for testing JS eventing bugs regarding very slow JS functions. — user508633
– user508633, Commented Jan 6, 2015 at 6:58

spender · Accepted Answer · 2014-11-17 16:22:26Z

3

You'd probably want something a bit like this using setInterval:

var i = 0;
var intervalId;
intervalId = setInterval(function() {
    $("#pourcentage").text(i+"%");
    if(i >= 100){
        clearInterval(intervalId);
    }
    i++;
}, 1000);

or using setTimeout instead:

var i = 0;
var scheduleNextTimeout; 
scheduleNextTimeout = function(){
    setTimeout(function() {
        $("#pourcentage").text(i+"%");
        if(i < 100){
            scheduleNextTimeout();
        }
        i++;
    }, 1000);
};
scheduleNextTimeout();

edited Nov 17, 2014 at 16:22

answered Nov 17, 2014 at 16:15

spender

121k36 gold badges245 silver badges369 bronze badges

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

Comments

Josh Johnson · Accepted Answer · 2014-11-17 16:20:19Z

0

I would suggest the use of a recursive function for this.

function doProgress (startingPercent, interval) {
    var percent = startingPercent++;

    window.setTimeout(function () {
        $('#percentage').text(percent.toString() + '%');

        if (percent < 100) {
            doProgress(percent, interval);
        }
    }, interval);
}

answered Nov 17, 2014 at 16:20

Josh Johnson

1452 silver badges14 bronze badges

Collectives™ on Stack Overflow

Synchronous Sleep function in Javascript

1st try :

2nd try :

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1st try :

2nd try :

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related