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

Question

我正在使用 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;
    });
  });
});

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

Answer 1

看起来可能是这样，因为所有事情都是并行发生的，而不是按顺序发生的，或者可能确实大部分时间都花在 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 更改为 setTimout，并设置一些超时值，让 UI 线程在屏幕上绘制它需要绘制的内容。您甚至可以使用 window.requestAnimationFrame() 来实现此目的。