jimpがコードをブロックするのを避ける方法node.js

Question

私はいくつかの写真を操作するためにJimpを使用しています。

私は写真付きの配列を持っています。このように：

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

これは、各画像が行われたときに、それが記録されます素敵な作品：

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

そして、これは、それらを操作するためのコードです。しかし、コードをブロックしていて、これを試してみてください：

すべての画像が処理されるまで、テキストは更新されません。イメージを処理するたびにテキストを更新できるように、どうすればこの作業ができますか？

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); 
    }); 
    }); 
}; 

ます。また、UIスレッドが上に描画するために聞かせ、いくつかのタイムアウト値をsetTimoutにsetImmediateを変更することができます描く必要があるものを画面に表示します。そのためにwindow.requestAnimationFrame()を使用することもできます。