js做一个页面内用柱状图表示数据，展示同步异步处理三种排序算法

好的，我可以为您提供一个简单的页面内展示排序算法的柱状图，使用 JavaScript 实现。下面是一个示例代码：

HTML:

<div>
  <h3>排序前数组：</h3>
  <p id="original-array"></p>
</div>
<div>
  <h3>同步排序后数组：</h3>
  <div id="sync-chart"></div>
</div>
<div>
  <h3>异步排序后数组：</h3>
  <div id="async-chart"></div>
</div>
<button onclick="sortArraySync()">同步排序</button>
<button onclick="sortArrayAsync()">异步排序</button>

JavaScript:

let array = [9, 3, 7, 2, 6, 5, 1, 8, 4];

// 显示待排序数组
document.getElementById("original-array").innerHTML = array.join(", ");

function sortArraySync() {
  // 使用同步排序算法进行排序
  bubbleSort(array);

  // 显示排序后的数组
  const chart = document.getElementById("sync-chart");
  displayChart(chart, array);
}

async function sortArrayAsync() {
  // 使用异步排序算法进行排序
  await mergeSort(array);

  // 显示排序后的数组
  const chart = document.getElementById("async-chart");
  displayChart(chart, array);
}

// 冒泡排序算法
function bubbleSort(array) {
  const n = array.length;
  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      if (array[j] > array[j + 1]) {
        const temp = array[j];
        array[j] = array[j + 1];
        array[j + 1] = temp;
      }
    }
  }
}

// 归并排序算法
async function mergeSort(array) {
  if (array.length <= 1) {
    return array;
  }

  const middle = Math.floor(array.length / 2);
  const left = array.slice(0, middle);
  const right = array.slice(middle);

  const sortedLeft = await mergeSort(left);
  const sortedRight = await mergeSort(right);

  return merge(sortedLeft, sortedRight);
}

function merge(left, right) {
  let result = [];
  let i = 0,
    j = 0;

  while (i < left.length && j < right.length) {
    if (left[i] < right[j]) {
      result.push(left[i]);
      i++;
    } else {
      result.push(right[j]);
      j++;
    }
  }

  return result.concat(left.slice(i)).concat(right.slice(j));
}

// 显示柱状图
function displayChart(chart, array) {
  chart.innerHTML = "";

  for (const num of array) {
    const bar = document.createElement("div");
    bar.style.height = num * 20 + "px";
    bar.style.background = "blue";
    bar.style.margin = "2px";
    chart.appendChild(bar);
  }
}

这段代码会在页面上展示两个按钮和三个段落，其中第一个段落显示待排序数组，第二个段落会在同步排序后显示排序后的数组的柱状图，第三个段落会在异步排序后显示排序后的数组的柱状图。当点击同步排序按钮时，会触发 `sortArraySync()` 函数，该函数使用 JavaScript 的冒泡排序算法对数组进行同步排序，然后更新页面上的柱状图以显示排序后的结果。当点击异步排序按钮时，会触发 `sortArrayAsync()` 函数，该函数使用 JavaScript 的归并排序算法对数组进行异步排序，然后更新页面上的柱状图以显示排序后的结果。值得注意的是，在 `mergeSort()` 函数中，我们使用了 `async/await` 关键字，以便在递归过程中等待异步操作的完成。