3

在我的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();
  • 换行改变convertedPercentin的值zone.run()
  • 换行改变convertedPercentin的值requestAnimationFrame()

接下来我应该尝试什么？

4

1 回答 1

2

众所周知，Javascript 是单线程的。如果您执行繁重的计算，您的主线程将被阻塞并且在完成之前不会被释放。也许您可以尝试使用 Observables，异步操作浏览器将根据优先级对其进行处理。

零件：

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

模板：

<p>Conversion is  {{ convertedPercent$ | async }}% complete</p>
于 2018-11-10T06:28:50.220 回答