如何使用并行Web Worker?

时间:2019-07-12 10:05:41

标签: javascript parallel-processing web-worker

我需要并行处理 100 个图像文件。我将其分为3个流。

async process(){
for (const key in this.files) {
  let i: number = Number(key);
  if( i % 3 === 0)
  this.files[i].thumb = (await this.fn(key, this.files[key])).data.thumb;
}
for (const key in this.files) {
  let i: number = Number(key);
  if( i % 3 === 1)
  this.files[i].thumb = (await this.fn(key, this.files[key])).data.thumb;
}
for (const key in this.files) {
  let i: number = Number(key);
  if( i % 3 === 2)
  this.files[i].thumb = (await this.fn(key, this.files[key])).data.thumb;
}
}

我非常清楚这不是并行的。如何使此函数并行? (另外,我需要将并行任务的数量作为参数传递。

我该如何实现?


我尝试了一些变化,但是没有运气。这只是一个3的池。:(

async process(){
let queue: Promise<any>[] = [];
for (let index = 0; index < this.files.length; index+=3) {
  let i = index;

  for (let j = 0; j < 3; j++)
    if(this.files[i+j]) queue.push(this.createThumbnail(i+j, this.files[i+j]))

  let respArr = await Promise.all(queue);
  console.log(respArr);

  for (let j = 0; j < 3; j++)
    if(respArr[j]) this.files[i+j].thumb = respArr[j].data.thumb;

  queue = [];
}

}

1 个答案:

答案 0 :(得分:1)

我们需要从n个工作开始,然后每完成一个工作,就开始一个新工作,直到没有工作为止。 看一下这段代码:

const queue = []
let pointer = 0
let resolvedCount = 0

const start = (fn, files, n) => {
  while (pointer < n) queue.push(createPromise(files[pointer], fn))
}

const createPromise = (file, fn) => {
  let promise = new Promise(function(resolve, reject) {
    fn(files[pointer], function(data) {
      setTimeout(function() {
        resolve(data.thumb)
      }, pointer * 1000);
    })
    pointer += 1
  })
  promise.then(function(thumb) {
    resolvedCount += 1
    console.log(thumb, "resolved!")
    if (files[pointer]) {
      queue.push(createPromise(files[pointer], fn))
    }
    if (resolvedCount === files.length) {
      Promise.all(queue).then(done)
    }
  })
  return promise
}

const done = (values) => {
  console.log(values)
}

const files = [{
    thumb: 'a'
  },
  {
    thumb: 'b'
  },
  {
    thumb: 'c'
  },
  {
    thumb: 'd'
  },
  {
    thumb: 'e'
  }
]
const fn = (x, f) => f(x)

start(
    fn, //the function you want to apply on each entry
    files, //the array you want to do a job on
    2 // number of parallel jobs
)