完成后不可见异步方法的副作用

如何解决完成后不可见异步方法的副作用

以下类具有一个AudioContext，该音频上下文已在start方法中初始化，但在调用stop方法时始终未定义。

export class PitchDetector {
  private audioCtx?: AudioContext;

  public async start(onPitchDetected: (frequency: Frequency) => void): Promise<void> {
    this.audioCtx = new AudioContext();
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: { sampleRate: sampleRate },});
    const streamSource = this.audioCtx.createmediastreamsource(stream);
    const scriptprocessor = this.audioCtx.createscriptprocessor(bufferSize);
    scriptprocessor.onaudioprocess = onAudioProcess.bind(undefined,onPitchDetected);
    streamSource.connect(scriptprocessor);
    scriptprocessor.connect(this.audioCtx.destination);
  }

  public async stop() {
    await this.audioCtx!.close();
  }
}

在这样的React组件中调用它。

export const Something: React.FC<Props> = (props) => {
// ...

  let pitchDetector = new PitchDetector();

// ...

  async function keyboardOnClick(octave: number,key: Key) {
    await pitchDetector.start(setFrequency);
// ...
  }

  async function onFrequencyInput(freq: Frequency) {
    await pitchDetector.stop();  // <- Here it fails.
// ...
  }

  return <SomeComponents/>
}

我无法共享完整的代码，但是要点是keyboardOnClick是一个onclick处理程序，如果检测到某些频率，则会调用onFrequencyInput。它始终以TypeError，Cannot read property 'close' of undefined失败。