为什么 array.length 不起作用，而数组由 javascript 中的异步函数填充

Question

我正在学习 WebAudio API。我面临一个问题。基本上这里的事情是异步的......所以我有点困惑。请帮忙。这是我的代码：-

//"use strict";

var sources = new Array();
var actx;
var songs = ['src1.mp3', 'src2.mp3'];

async function start() {
  console.log("WELCOME!!");
  try {
    actx = new AudioContext();
  } catch (e) {
    console.log('WebAudio api is not supported!!');

  }
  await getBuffers(actx, songs);
  console.log(sources);
  console.log(sources.length);
}

function load_song(url) {
  let promise = new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = () => {
      let audioData = request.response;
      resolve(audioData);
    }
    request.onerror = () => {
      reject(new error("Could not load the song:- " + url));
    }

    request.send();
  });
  return promise;
}
//creats buffers
async function getBuffers(actx, songs) {
  // let buffer_list = new Array();

  for (let x = 0; x < songs.length; x++) {
    let temp = actx.createBufferSource();
    await load_song(songs[x]).then((audioData) => {
      actx.decodeAudioData(audioData).then((decodedAudioData) => {
        temp.buffer = decodedAudioData;
        sources.push(temp);
      }).catch((error) => {
        console.error(error);
      });
    });
  }
  //console.log(buffers.length);
}
async function play() {
  //start();
  sources[0].start(0);
  //sources[1].start(0);
}

function stop() {
  sources[0].stop(0);
  //sources[1].stop(0);
}

在console.log(sources) 和console.log(sources.length) 两行中。结果在这里。为什么console.log(sources.length) 为 0？
请帮帮我........谢谢。

Answer 1

您应该将getBuffers 代码更改为类似的内容

async function getBuffers(actx, songs) {
    try {
        for (let song of songs) {
            let temp = actx.createBufferSource();
            var audioData = await load_song(songs[x])
            var decodedAudioData = await actx.decodeAudioData(audioData)
            temp.buffer = decodedAudioData;
            sources.push(temp);
        }
    } catch (e) { console.log(e) }
}

Answer 2

你需要返回

actx.decodeAudioData(audioData).then((decodedAudioData) => {

因为你没有退回它，所以你不要await它。因此日志会在数组被填充之前出现，但是console.log(sources) 是实时的，所以你会看到最新的变化。

当您在任何地方使用await 时，此类错误更不可能发生，而且 IMO 也更易于阅读：

async function getBuffers(actx, songs) {
  const sources = [];  //mutating a global variable isnt good, so lets make it local
  for (const song of songs) { //for...of is so beautiful, why dont you use it?
   try { //this is similar to .catch
    let temp = actx.createBufferSource();
    const audioData = await load_song(song);

    const decodedAudioData =  await actx.decodeAudioData(audioData);
    temp.buffer = decodedAudioData;
    sources.push(temp);
   } catch(e){ console.error(e); } //okay that does not count as an error handler...
  }
  return sources; //getBuffers implies that it returns sth
}