Question

在我的 component.ts 中，有一个循环将WAV音频数据转换为MP3：

for (var i = 0; i < samples.length; i += sampleBlockSize) {

  let sampleChunk = samples.subarray(i, i + sampleBlockSize);
  var mp3buf = mp3encoder.encodeBuffer(sampleChunk);
  if (mp3buf.length > 0) {
      mp3Data.push(mp3buf);
  }

  this.convertedPercent = Math.floor( ( i / samples.length ) * 100);
  console.log('convertedPercent: ' + this.convertedPercent);
}

console.log('This is where the HTML view jumps from 0% to 100%');

在我的 component.html 中，有一些代码可以显示到目前为止已转换的音频百分比：

<p>Conversion is {{ convertedPercent }}% complete</p>

发生转换时，它会将正确的转换百分比实时记录到控制台中，但是视图仍停留在0％完成状态。循环结束后，立即跳到100％。

我尝试过：

this.cd.detectChanges();
在convertedPercent中包装更改zone.run()值的行
在convertedPercent中包装更改requestAnimationFrame()值的行

接下来我应该尝试什么？

Answer 1

我们知道，Javascript是单线程的。如果执行繁重的计算，则主线程将被阻塞，直到其完成才被释放。也许您可以尝试使用Observables，因为异步操作浏览器会根据优先级对其进行处理。

组件：

convertedPercent$ = new Subject<any>();
convertedPercent$.next(this.convertedPercent);

模板：

<p>Conversion is  {{ convertedPercent$ | async }}% complete</p>

即使使用ChangeDetectorRef，ngZone和requestAnimationFrame

1 个答案: