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()。

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

1 个答案: