javascript - DOM 重绘被 childProcess.spawnSync 阻止

Question

我有一个 electro/node.js 应用程序，但我遇到了问题。具体来说，我需要通过更新 DOM 中的元素向用户提供有关同步生成长循环进度的一些反馈。然而，实际显示的内容在循环期间不会改变。整个循环完成后，该元素会更新为最终的 max指数值。

function dosomething(index,callback) {
   childProcess.spawnSync('app1',...  //takes 1 second
   childProcess.spawnSync('app2',...  //takes 6 seconds, depends on app1 running 1st
   console.log('working on: ' + index);
   callback(index);
}

function dosomethingelse(index) {
    $('#somediv').html(index);  //update progress bar
    console.log('displaying: ' + $('#somediv').html());
}

for(var i=0; i<max; i++){ //max is usually 10-100, loop takes 1 to 10 minutes
    dosomething(i,dosomethingelse);
}

当我将进度 html 转储到控制台时，它会以索引作为回调递增:

CONSOLE:
working on: 0
displaying: 0
working on: 1
displaying: 1
working on: 2
displaying: 2
...

此外，我尝试通过运行以下代码来强制重绘 div，但无济于事:

function dosomethingelse(index) {
    $('#somediv').html(index);  //update progress bar
    console.log($('#somediv').html());
    //REDRAW
    document.getElementById("somediv").innerHTML =num;
    document.getElementById("somediv").style.display = 'none';
    document.getElementById("somediv").offsetHeight;
    document.getElementById("somediv").style.display = 'block';
}

据我所知，使用spawnSync使我的二进制应用程序在nodejs上以阻塞模式运行。这直接针对 Node 的非阻塞核心，但在我的情况下绝对必要，因为我的命令行调用运行 6 秒并占用几乎 100% 的 CPU。如果我改用标准的异步生成，我最终会同时运行 50 个 100% 的进程，并在几分钟后大约在同一时间完成。同样，没有向用户提供进度反馈。我不明白为什么我的回调没有完成。如果我切换功能以便 dosomethingelse首先用 dosomething 调用回调后，我仍然没有收到 DOM 更新。

我尝试过的另外两件事:npm sleep :

dosomething(i);
var sleep = require('sleep');
sleep.usleep(100);
dosomethingelse(i);

和deasync :

var deasync = require('deasync');
deasync(dosomething(i));
dosomethingelse(i);

相同的结果。另外，如果我拿出我的长跑dosomething函数并将其替换为 sleep.sleep(3)我得到同样的结果。 Node 只是从一个阻塞任务转到下一个阻塞任务，而不更新 UI。

Answer 1

您似乎只担心同时运行太多异步进程。但实际上，您可以控制同时运行多少个。

例如像这样:

function runTask(tasks, index, callback) {
  if (index >= tasks.length) {
    callback();
  }
  tasks[index](() => runTask(tasks, index + 1, callback));
}

function queue(tasks, callback) {
  runTask(tasks, 0, callback);
}

有了这个，您将有一个简单的方法来对异步生成进行排队:

const spawn = require('child_process').spawn;

function customSpawn(command, args) {
  return callback => {
    const child = spawn(command, args);
    child.on('close', callback);
  }
} 

queue([customSpawn('app1', []), customSpawn('app2', [])], dosomethingelse);

_{我从未测试过上述任何代码，因此我不能保证其正确性。}

此外，如果您想摆脱所有这些回调，请查看 Promise 和生成器。

例如，对于 Promise，它可能看起来像这样:

function queue(tasks) {
  let index = 0;
  const runTask = arg => {
    if (index >= tasks.length) {
      return Promise.resolve(arg);
    }
    return new Promise((resolve, reject) => {
      tasks[index++](arg).then(arg => resolve(runTask(arg))).catch(reject);
    });
  };
  return runTask();
}

const spawn = require('child_process').spawn;

function customSpawn(command, args) {
  return () => new Promise((resolve, reject) => {
    const child = spawn(command, args);
    child.on('close', code => {
      if (code === 0) {
        resolve();
      } else {
        reject();
      }
    });
  });
}

queue([customSpawn('app1', []), customSpawn('app2', [])])
  .then(dosomethingelse)
  .catch(err => console.error(err));

Try it!

关于 for 循环的注意事项:首先使用闭包构建您想要执行的操作的队列，如 customSpawn 中所示，然后将其传递给 queue。