Change dom element while other process is running

Question

function subProcess() {
  var f = [];
  for (var i = 0; i < 10000; i++) {
    for (var j = 0; j < 100000; j++) {}
    f.push(1);
  }
}

var statusElement = document.getElementById('status');

statusElement.innerHTML = "1";
subProcess();
statusElement.innerHTML += "<br/>2";
subProcess();
statusElement.innerHTML += "<br/>3";
subProcess();
statusElement.innerHTML += "<br/>4";
subProcess();
statusElement.innerHTML += "<br/>5";
subProcess();
statusElement.innerHTML += "<br/>6";
subProcess();
statusElement.innerHTML += "<br/>7";
subProcess();
statusElement.innerHTML += "<br/>8";
statusElement.innerHTML = "finished";

<div id='status'></div>

I have a simple wish, that i can solve, but my question is it the right way.

I have process which takes time. The process is divided into several sub process. When each sub process ends i want to write it at some paragraph element.

The problem is that the paragraph is not updating till the big process ends and that because the browser is occupied and when it will be free it will update the DOM.

I know I can simply put each sub process in timeout with 10 milliseconds or something like this, and it is doing the job.

The question is it the only way ? Is it a function that tells the browser do your work and tell when u finished ?

For ex.

// process start

// writing the status to paragraph
// wait till browser update the dom elements
// sub process 1 start

// writing the status to paragraph
// wait till browser update the dom elements
// sub process 2 start

// writing the status to paragraph
// wait till browser update the dom elements
// sub process 3 start

// writing the status to paragraph
// wait till browser update the dom elements
// process 1 ends

My problem is that the process time is important for me. and i see when i put timeout with 0 milliseconds it is not working for some reason. so 10 miliseconds for each sub process can be summarized into half a second.

[Javascript is **not** a multithreaded language](http://stackoverflow.com/questions/16749664/single-thread-concept-of-javascript-running-in-browser) — Liam, Jun 16 '15 at 15:32
I am aware of that. and this is not my attention. My question is how to wait till the browser is done with update UI and then run the next process. — Raziza O, Jun 16 '15 at 17:24

score 0 · Answer 1 · edited May 23 '17 at 11:51

I think your getting confused.

Firstly like I said JavaScript is not multithreaded. It runs a single thread executing each command in turn until all the commands are done (It's actually a bit more complicated than that but that will do for now).

Secondly subProcess() isn't a process it's a function call. This will all process linearly. Think of this as:

statusElement.innerHTML = "1";
var f = [];
  for (var i = 0; i < 10000; i++) {
    for (var j = 0; j < 100000; j++) {}
    f.push(1);
  }
statusElement.innerHTML += "<br/>2";
var f = [];
  for (var i = 0; i < 10000; i++) {
    for (var j = 0; j < 100000; j++) {}
    f.push(1);
  }
...etc

Thirdly the DOM will only be updated once the thread is free, your thread isn't free until the end because subProcess() is constantly doing things. A setTimeout would work because this would release the thread to do other things

I know those 3 things u mentions. i've just simplified my question. with a simply function. My website is much more complex and contains real sub process, with async callbacks and such. My question is there away to know when browser finished its duties? and not just set a 10ms timeout.. — Raziza O, Jun 16 '15 at 16:50

score -1 · Answer 2 · answered Jun 16 '15 at 15:32

-1

I think you described exactly what are designed to address Web Workers

answered Jun 16 '15 at 15:32

Alexey Rytikov

558
6
12

Can you elaborate? [Link only answers are discouraged](http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers) – Liam Jun 16 '15 at 15:33
Send every "long" process in another Web Worker. – Alexey Rytikov Jun 16 '15 at 15:39
I'm very familiar with web workers and it not always the solution. In my example i just simplify my problem. In the real world it is very complex - server connections, async callback, and more... Web worker are clean scope which you will need to copy/transfer all the parameters to it plus, including scripts, takes too much work for this case – Raziza O Jun 16 '15 at 16:59

score -1 · Answer 3 · edited May 23 '17 at 11:58

-1

There's some minimum when set the timeout. So it's good to just use 10ms. If you insist, this post says it could be down to 4ms. What is minimum millisecond value of setTimeout?

Currently, I think there's no other way except combination of setTimeout, clousure and callback to solve your problem.

var PIECE = 100;
function print(string) {
  var statusElement = document.getElementById('status');
  statusElement.innerHTML += ('' + string);
}
function subProcess(start, end) {
  var i = 0, j = 0, finished = false;
  var f = [];
  // End comments meet.
  if (start >= end) {
    print('Finished');
    return;
  }

  var sub = function() {
    var count = 0;
    finished = true;
    for (; i < 10000; ++i) {
      for (; j < 10000; ++j) {
        f.push(1);
        ++count;
        if (count >= PIECE) {
          finished = false;
          break;
        }
      }
    }
    if (finished) {
      print(start);
      subProcess(start + 1, end);
      return;
    }
    setTimeout(sub, 10);
  }
  setTimeout(sub, 10);
}

JsFiddle

edited May 23 '17 at 11:58

Community

1
1

answered Jun 16 '15 at 15:38

fuyushimoya

9,715
3
27
34

This doesn't answer the question being asked. – Liam Jun 16 '15 at 15:52
@Liam What do you think he's asking? In his question, I think he knows the settimeout, and at the last of the question, he also has issue about the why setting 10ms, I'm not sure that what he wants to ask, and I'm not sure you answered what he asked. – fuyushimoya Jun 16 '15 at 16:24
For all the guys who addressing the solution to multithreaded and such, this is not my attention. I'm very familiar with javascript, web workers, single threaded browser, and much more... and my question simply, is there a way/function to wait till the browser is done with his duties. for ex. `window.updateUI().then(function() { subProcess(); })` like deferred – Raziza O Jun 16 '15 at 16:49

Change dom element while other process is running

3 Answers3