Updating DOM during Javascript function execution

Question

I have a long running Javascript function, that looks like this:

window.myFunction = function() {
    for(var i=0;i<500;i++){
        // calling a function here
        document.getElementbyID('mySpan').innerHTML = "Completed step " + i + "/500"
    }
}

My function calls another synchronous function very often (I used 500 in this example) and while the user waits for the task to complete, i'd like to implement something like a loading bar but I demonstrated it with updating a span in my case here. Is it possible to force a DOM refresh of some sort every time I update my span?

you have a typo getElementById

Suraj Rao
– Suraj Rao

2017-09-25 11:43:30 +00:00
Commented Sep 25, 2017 at 11:43 — Suraj Rao
– Suraj Rao, Commented Sep 25, 2017 at 11:43

Reinstate Monica Cellio · Accepted Answer · 2017-09-25 11:49:21Z

4

Since scripts run in a single thread in your browser, any method like yours will need to complete before the DOM is updated. What you can do, however, is use an iterative function with a small delay that allows the browser to redraw.

Here's an example...

window.myFunction = function(i) {
    // calling a function here - passing i as a parameter, if needed
    document.getElementById('mySpan').innerHTML = "Completed step " + i + "/500";
    i++;
    if (i <= 500) setTimeout(function() { myFunction(i) }, 1);
}

myFunction(0);

<span id="mySpan"></span>

answered Sep 25, 2017 at 11:49

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

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

2 Comments

Daniel Gretzke Over a year ago

Doesn't an iterative function has a maximum depth and can fail after a certain amount of iterations? Whats the maximum number of iterations I can go through?

Reinstate Monica Cellio Over a year ago

In this instance there's no maximum depth. That's only an issue where recursion is involved, and in this case the function dies straight after calling itself. So while it appears to be recursive, it's actually not.

Thusitha · Accepted Answer · 2017-09-25 12:01:01Z

2

You should use a setTimeout method to run it on the event queue rather than run it on the stack. Because you won't see the updates inside a for loop since it runs without a delay. I added a callback to run it after a heavy task.

//Heavy task function
var heavyTask = function(i, callback) {
  setTimeout(function() {
    document.getElementById('mySpan').innerHTML = "Completed step " + i + "/500";

    //Callback to the caller saying the task is finished here and continue on
    /////////////////////
    callback();

  }, 50);
}


var i = 0;

//Call myFunction recursively.
(window.myFunction = function() {
  if (i < 500) {
    heavyTask(i, function() {
      i++;
      window.myFunction();
    });
  }
})();

<span id="mySpan"></span>

edited Sep 25, 2017 at 12:01

answered Sep 25, 2017 at 11:48

Thusitha

3,5113 gold badges23 silver badges33 bronze badges

2 Comments

Reinstate Monica Cellio Over a year ago

What if the function being called takes longer than the interval?

Thusitha Over a year ago

@Archer I updated the answer. Have a look. You should call the callback from the heavy task once the task is completed.

Collectives™ on Stack Overflow

Updating DOM during Javascript function execution

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related