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

Change dom element while other process is running

本文关键字：dom 元素 运行时 其他 进程      更新时间：2023-09-26

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 毫秒可以总结为半秒。

我想你很困惑。

首先，就像我说的JavaScript不是多线程的。它依次运行单个线程执行每个命令，直到所有命令都完成（它实际上比这复杂一些，但现在就可以了）。

其次，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可以工作，因为这会释放线程来做其他事情

我想你准确地描述了什么旨在解决 Web 工作者的问题

设置超时时有一些最小值。所以最好只使用 10ms。如果你坚持，这篇文章说它可能会下降到4ms。什么是 setTimeout 的最小毫秒值？

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

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);
}

小提琴

相关文章：