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

【问题标题】：How to avoid jimp blocking the code node.js如何避免 jimp 阻塞代码 node.js
【发布时间】：2017-08-17 20:31:43
【问题描述】：

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

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

【问题讨论】：

超时工作。这将确保它发生在下一个事件中。
我不明白对不起，怎么回事？
我在这段代码中没有看到任何阻塞。在 forEach 内部，所有调用似乎都是异步的。
@Ananth 我知道，这就是为什么我不知道是什么原因造成的，我正在尝试调试它但没有任何效果
.quality() 似乎唯一能做的就是set an instance property。

标签： javascript node.js

【解决方案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()。

【讨论】：

您关于 setImmediate 的说法不太正确。 setImmediate 将被添加到事件列表的末尾。绘制事件将在它之前发生您不需要使用 setTimeout 来让 UI 绘制。