Question

我正在尝试获取列表中每个对象的持续时间（以秒为单位），但结果有些麻烦。我认为是因为我没有完全理解异步行为。

我以对象数songs[]的数组n开始我的功能。在我的函数结束时，目标是要拥有一个数组songLengths，其中第一个值是songs[]中第一个对象的持续时间，依此类推。

在以下示例中，我尝试为函数建模：JavaScript closure inside loops – simple practical example。但是我得到每个songLengths[]索引的不确定值。

$("#file").change(function(e) {
  var songs = e.currentTarget.files;
  var length = songs.length;
  var songLengths = [];

  function createfunc(i) {
    return function() {
      console.log("my val = " + i);
    };
  }

  for (var i = 0; i < length; i++) {
    var seconds = 0;
    var filename = songs[i].name;
    var objectURL = URL.createObjectURL(songs[i]);
    var mySound = new Audio([objectURL]);

    mySound.addEventListener(
      "canplaythrough",
      function(index) {
        seconds = index.currentTarget.duration;
      },
      false,
    );
    songLengths[i] = createfunc(i);
  }
});

Answer 1

这样的事情应该可以正常工作，而不会造成混乱，并且promises可以增加干净的异步性。

基本上，我们声明了一个辅助函数computeLength，该函数采用HTML5 File并执行您已经做过的魔术来计算其长度。（尽管我确实添加了URL.revokeObjectURL调用以避免内存泄漏。）

但是，promise会使用包含原始文件对象和计算出的持续时间的对象来解析承诺，而不是仅仅返回持续时间。

然后在事件处理程序中，我们将映射到选择的files上以创建其中的computeLength承诺，并使用Promise.all等待所有承诺，然后记录结果数组[{file, duration}, {file, duration}, ...]。

function computeLength(file) {
  return new Promise((resolve) => {
    var objectURL = URL.createObjectURL(file);
    var mySound = new Audio([objectURL]);
    mySound.addEventListener(
      "canplaythrough",
      () => {
        URL.revokeObjectURL(objectURL);
        resolve({
          file,
          duration: mySound.duration
        });
      },
      false,
    );
  });  
}

$("#file").change(function(e) {
  var files = Array.from(e.currentTarget.files);
  Promise.all(files.map(computeLength)).then((songs) => {
    console.log(songs);
  });
});

音频对象的持续时间不断变化？

1 个答案: