JavaScript-等待函数完成处理，然后再进入循环的下一次迭代

Question

我想让一个功能等待另一个功能完全完成。我们拥有此功能，该功能处理文件列表，并将其中一个加载到LoadFileIntomemory函数中。

我希望此功能等待LoadFileIntomory函数完成操作和处理该文件，然后再进行循环的下一个迭代并使用下一个文件调用。

function processFiles(files) {
  for (let i = 0; i < files.length; i++) {
    console.log("Loading File into memory");
    loadFileIntoMemory(files[i]);
  }
}

因此，它将加载文件编号1，等待要完成的所有操作，然后加载文件2。我不希望它在LoadFileIntomory函数上垃圾邮件垃圾邮件，而无需完成之前的文件。

function loadFileIntoMemory(file) {
  
  //create a dictionary using the file name
  originalValues[file.name] = {};
  // create a variable with the file name to pass to storeOriginalValues and replaceOccurence
  var filename = file.name;
  // Start reading the file
  var reader = new FileReader();
  reader.onload = function (file) {
    var arrayBuffer = reader.result;
    // Here we have the file data as an ArrayBuffer.  dicomParser requires as input a
    // Uint8Array so we create that here
    var byteArray = new Uint8Array(arrayBuffer);
    dataSet = dicomParser.parseDicom(byteArray);
    // Store the original values into the dict
    storeOriginalValues(filename);

    // iterate through each metadata field and replace the original value with the de-identified value.
    console.log("De-identifying values")

    for (const [key, value] of Object.entries(elementsToRemove)) {
      var element = dataSet.elements[value];
      if (typeof element !== "undefined") {
        for (var i = 0; i < element.length; i++) {
          dataSet.byteArray[element.dataOffset + i] = 32;
        }
      }
    }

    // Check if the Patient ID is still Present after the de-indentification process is completed
    replaceOccurences(filename, originalValues[filename].PatientID);
    // replaceOccurences(filename, originalValues[filename].PatientName);
    // replaceOccurences(filename, originalValues[filename].etc);

    // download the de-identified DICOM P10 bytestream
    console.log('Downloading File');
    var blob = new Blob([dataSet.byteArray], { type: "application/dicom" });
    var url = window.URL.createObjectURL(blob);
    window.open(url);
    window.URL.revokeObjectURL(url);
    
  };
  reader.readAsArrayBuffer(file);
}

Answer 1

您需要将LoadFileIntomemory转换为承诺。

function loadFileIntoMemory(file) {
    return new Promise((resolve,reject) => { 
        ......
        reader.onload = function (file) {
           ......
           return resolve();  //when all is done, resolve the promise.
        }

    })
}

然后，您可以在异步/等待循环中使用该函数。

const processFiles = async (files) => {
  for (let i = 0; i < files.length; i++) {
    console.log("Loading File into memory");
    await loadFileIntoMemory(files[i]);
  }
}