使用 await 后停止执行其他功能？

Question

我在使用带有“async”和“await”的递归时遇到了一些问题。在下面的代码中，我创建了一个函数“wait”，它返回一个 Promise，我在另一个函数“Partition”中调用它以在循环中添加一些延迟。之后，我在“QuickSort”中调用这个函数来实现一些递归。内部“分区”函数的第一次调用按预期执行。在此之后，值在回调“then”中传递以开始执行函数“quicksort”，但在执行此递归中的第一个“await”之后，代码将传递给回调中第二个“quickSort”函数的第二个递归"then" 没有完成前一个递归。

我猜这种行为是意料之中的，因为我在分区函数中使用了“异步”“异步”，所以这允许执行其他代码。

 * delay in some functions. This works wll
 * in loops with the use of 'async' and 'await'
 * @param {int} ms - The time to delay;
 */
function wait(ms) {
  return new Promise(r => setTimeout(r, ms));
}

/**
 * This function perform the partition in an
 * array to perform the Quick Sort
 * @param {int} array - The numbers to be sorted
 * @param {int} low - The low index of the array
 * @param {int} high - The high index of the array
 */
async function partition(array, low, high) {
  /* This pivot is place at the rigth position */
  var pivot = array[high];
  var index = low - 1;
  /* Get all the columns child nodes */
  var columnNodes = document.getElementById("flex-box").childNodes;
  var parentElement = document.getElementById("flex-box");
  /* Change the color of the Pivot */
  var pivotColumnNode = columnNodes[high];
  pivotColumnNode.style.backgroundColor = "pink";

  for (let i = low; i < high; i++) {

    // /* Reset the color of the previous Index nodes */
    // if (columnNodes[i - 1] !== undefined) {
    //   columnNodes[i - 1].style.backgroundColor = "blueviolet";
    // }
    /* Change color of value being compare to Pivot node */
    var iNode = columnNodes[i];
    // iNode.style.backgroundColor = "red";
    if (array[i] < pivot) {
      index += 1;
      //Replace the values
      var valueofIndexElement = array[index];
      array[index] = array[i];
      array[i] = valueofIndexElement;

      /* Chnage the color of the node index to be chnanged */
      var nodeIndexElement = columnNodes[index];
      iNode.style.backgroundColor = "yellow";
      nodeIndexElement.style.backgroundColor = "brown";

      var nodeIndexElementClone = nodeIndexElement.cloneNode(true);
      var nodeIElementClone = iNode.cloneNode(true);

      parentElement.replaceChild(nodeIElementClone, columnNodes[index]);
      parentElement.replaceChild(nodeIndexElementClone, columnNodes[i]);
      //await wait(1000);
      nodeIElementClone.style.backgroundColor = "blueviolet";
      nodeIndexElementClone.style.backgroundColor = "blueviolet";
    }
    console.log("New Array: ", array);
    console.log("*********************************");
  }
  var valueOfLastGreaterElement = array[index + 1];
  array[index + 1] = pivot;
  array[high] = valueOfLastGreaterElement;

  /* Chnage the last node elements */
  var pivotColumnNodeClone = pivotColumnNode.cloneNode(true);
  var greaterColumnNodeClone = columnNodes[index + 1].cloneNode(true);

  parentElement.replaceChild(pivotColumnNodeClone, columnNodes[index + 1]);
  parentElement.replaceChild(greaterColumnNodeClone, columnNodes[high]);
  /* Reset the color of the Pivot node */
  pivotColumnNodeClone.style.backgroundColor = "blueviolet";
  greaterColumnNodeClone.style.backgroundColor = "blueviolet";

  console.log("Last: ", array);
  return index + 1;
}

/**
 * This sorts the array with the help of the partition
 * function. This uses recursion to divide an conquer the
 * array.
 * @param {int} array - The numbers to be sorted.
 * @param {*} low - The first index of the array '0'
 * @param {*} high - The length of the array.
 */
function quickSort(array, low, high) {
  debugger;
  if (low < high) {
    debugger;
    partition(array, low, high).then(value => {
      debugger;
      alert(value);
      quickSort(array, low, value - 1); // Before the partition index
      quickSort(array, value + 1, high); // After the partition index
    });
    debugger;
    // partition(array, low, high).then(value => {
    //   debugger;
    //   alert(value);
    //   quickSort(array, value + 1, high); // After the partition index
    // });
  }
}

我要完成的事情是如何在分区函数中使用await，并在“QuickSort”函数上以递归的方式使用该函数。

Answer 1

是的，您的 quicksort 函数现在也执行一些异步操作，因为它正在调用 async partition 函数。但是在代码中

quickSort(array, low, value - 1); // Before the partition index
quickSort(array, value + 1, high); // After the partition index

第二个调用不会等待第一个调用完成，因此它们会同时运行两个分区。您需要链接它们 - 使用明确的承诺链接

function quickSort(array, low, high) {
  if (low < high) {
    return partition(array, low, high).then(value => {
      alert(value);
      return quickSort(array, low, value - 1).then(() => { // Before the partition index
        return quickSort(array, value + 1, high); // After the partition index
      });
    });
  } else {
    return Promise.resolve();
  }
}

或使用async/await语法：

async function quickSort(array, low, high) {
  if (low < high) {
    const value = await partition(array, low, high)
    alert(value);
    await quickSort(array, low, value - 1); // Before the partition index
    await quickSort(array, value + 1, high); // After the partition index
  }
}