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>

我有一个简单的愿望，我可以解决，但我的问题是正确的方法。

我有一个需要时间的过程。该过程分为几个子过程。当每个子流程结束时，我想在一些段落元素上写它。

问题是该段落在大进程结束之前不会更新，并且由于浏览器被占用以及何时它将被释放它将更新DOM。

我知道我可以简单地将每个子进程置于超时10毫秒或类似的事情，并且它正在完成这项工作。

问题是唯一的方法吗？它是一个告诉浏览器完成工作并告诉你何时完成的功能？

对于前。

// 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

我的问题是，处理时间对我来说很重要。我看到当我把0毫秒的超时时间由于某种原因它不起作用。所以每个子过程的10毫秒可以归纳为半秒。

Answer 1

我觉得你很困惑。

首先就像我说JavaScript不是多线程的。它运行一个线程依次执行每个命令，直到完成所有命令（It's actually a bit more complicated than that，但现在这样做）。

其次 subProcess()不是一个函数调用的过程。这将全部线性处理。把它想象成：

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

第三只有在线程空闲后才会更新DOM，因为subProcess()一直在做，所以你的线程一直空闲到最后。 setTimeout would work because this would release the thread to do other things

Answer 2

我认为您确切地描述了旨在解决Web Workers

的问题

Answer 3

设置超时时有一些最小值。因此，使用10ms是件好事。如果你坚持，这篇文章说它可能会下降到4毫秒。 What is minimum millisecond value of setTimeout?

目前，我认为除了setTimeout，clousure和callback的组合之外没有其他方法可以解决您的问题。

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

在其他进程运行时更改dom元素

3 个答案: