在执行下一行代码之前等待超时完成

Posted 2023-02-25

【中文标题】在执行下一行代码之前等待超时完成

【英文标题】：Waiting for timeout to finish before executing next line of code

【发布时间】：2021-07-30 03:55:48

【问题描述】：

我正在制作一个排序算法可视化工具。我的程序有一部分，如果您单击合并排序按钮，它会以红色突出显示正在比较的两个元素，等待 1000 毫秒，然后在比较完成后将元素转回海蓝宝石。

为了让程序等待 1000 毫秒，我使用下面的方法。它在我的bubbleSort实现中工作得很好，但由于某种原因在mergeSort中不起作用：

await new Promise(r => setTimeout(r, 0.1));

我有一个理论，这是因为我使用的暂停方法仅暂停异步函数，但不完全确定这是否正确。在实践中发生的情况是，一旦程序到达await new Promise() 行，它就会返回到while 语句并从那里执行而不是等待 1000 毫秒，然后执行将返回 barA 和 barB 的行海蓝宝石。

function mergeSort(unsortedArray, aux = [...unsortedArray], lowIndex = 0, highIndex = unsortedArray.length - 1) 
  console.log(unsortedArray);

  // Base case
  if (highIndex === lowIndex) return;

  // Get midIndex
  const midIndex = Math.floor((highIndex + lowIndex) / 2);

  // Recursively run left side and right side until base case reached.
  mergeSort(unsortedArray, aux, lowIndex, midIndex);
  mergeSort(unsortedArray, aux, midIndex + 1, highIndex);

  // Merge the left sides and right sides
  merge(unsortedArray, aux, lowIndex, midIndex, highIndex);


// Does the actual work of ordering list
async function merge(unsortedArray, aux, lowIndex, midIndex, highIndex) 
  let auxkey = lowIndex;
  let i = lowIndex;
  let j = midIndex + 1;

  // While there are elements in left/right sides, put element in auxillary array
  // then increment the indexes by 1.
  while (i <= midIndex && j <= highIndex) 
    let arrayBars = document.getElementsByClassName('bar');
    const barA = arrayBars[i].style; 
    const barB = arrayBars[j].style;
    barA.backgroundColor = "red";
    barB.backgroundColor = "red";

    if (unsortedArray[i] <= unsortedArray[j]) 
      aux[auxkey] = unsortedArray[i];
      auxkey++;
      i++;
     else 
      aux[auxkey] = unsortedArray[j];
      auxkey++;
      j++;
    

    await new Promise(r => setTimeout(r, 0.1));
    barA.backgroundColor = "aquamarine";
    barB.backgroundColor = "aquamarine";
  

这是我的代码的精简版。更全面一点的请看：https://jsfiddle.net/SushiCode/k0954yep/9/

【问题讨论】：

您的小提琴缺少冒泡排序，并且在交换它们时不会更新条形图。此外，您对 aux 数组的使用也很奇怪。

将答案转换为评论：尝试将其更改为允许更长的时间，例如一秒钟 await new Promise(r => setTimeout(r, 1000));，因为这在所提供代码的本地测试中有效。

【参考方案1】：

我有一个理论，这是因为我使用的暂停方法只是暂停异步函数，但不完全确定这是否正确。

的确如此。您还需要将mergeSort 函数标记为async，以便await 和merge() 以及两个递归mergeSort() 调用。

async function mergeSort(unsortedArray, aux = [...unsortedArray], lowIndex = 0, highIndex = unsortedArray.length - 1)  /*
^^^^^ */
  if (highIndex === lowIndex) return;

  const midIndex = Math.floor((highIndex + lowIndex) / 2);

  await mergeSort(unsortedArray, aux, lowIndex, midIndex);
//^^^^^
  await mergeSort(unsortedArray, aux, midIndex + 1, highIndex);
//^^^^^

  await merge(unsortedArray, aux, lowIndex, midIndex, highIndex);
//^^^^^