如何避免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()。