如何避免 jimp 阻塞 Node.js 代码

我正在使用 Jimp 来处理一些照片。

我有一个包含照片的数组。像这样：

var images = ['.../pic-1.jpg', '.../pic-2.jpg', '.../pic-3.jpg', '.../pic-4.jpg'];

这是操纵它们的代码：

images.forEach(function(image){
  jimp.read(image, function(err, img){
    img.quality(90, function(){
      console.log("done with this image!");
    });
  });
});

这很有效，它会在每个图像完成时进行记录。但是，它阻止了代码，如果我尝试这样做：

var processed = 0;

images.forEach(function(image){
  jimp.read(image, function(err, img){
    img.quality(90, function(){
      processed++;
      document.querySelector('p').textContent = 'processed images: ' + processed;
    });
  });
});

在处理完所有图像之前，它不会更新文本。如何解决这个问题，以便每次处理图像时都可以更新文本？

看起来可能是这样，因为一切都是并行发生的，而不是按顺序发生的，或者也许确实大部分时间都花在了img.quality()这是一个 CPU 密集型任务，会阻塞主线程。

您可以尝试更改此设置：

images.forEach(function(image){
  jimp.read(image, function(err, img){
    img.quality(90, function(){
      processed++;
      document.querySelector('p').textContent = 'processed images: ' + processed;
    });
  });
});

像这样的事情：

let processed = 0;
let f = () => {
  jimp.read(images[processed], function(err, img){
    img.quality(90, function(){
      processed++;
      document.querySelector('p').textContent = 'processed images: ' + processed;
      if (processed < images.length) setImmediate(f);
    });
  });
};

您还可以更改setImmediate to setTimout设置一些超时值，让 UI 线程在屏幕上绘制它需要绘制的内容。你甚至可以使用window.requestAnimationFrame()为了那个原因。