【发布时间】：2020-02-24 10:38:27
【问题描述】：
function insertSort(inputArray = myChart.data.datasets[0].data) {
let inputArrayLength = inputArray.length;
let outerIndex = 1;
let innerIndex = 0;
while(outerIndex<inputArrayLength) {
innerIndex = outerIndex - 1;
temp = outerIndex;
while(innerIndex>=0){
if (inputArray[temp]<inputArray[innerIndex]){
inputArray[innerIndex] = [inputArray[temp], inputArray[temp] = inputArray[innerIndex]][0];
temp = innerIndex;
innerIndex--;
} else {
innerIndex--;
}
}
sleep(1000);
console.log('Intermediate result is: ', inputArray);
myChart.data.datasets[0].data = inputArray;
myChart.update();
outerIndex++;
}
console.log('Final result is: ', inputArray);
return true;
}
function sleep(milliseconds) {
console.log('going in sleep');
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
console.log('out of sleep');
}
let ctx = document.getElementById('myChart').getContext('2d');
let randomArray = Array.from({length: 10}, () => Math.floor(Math.random() * 10+1));
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Blue', 'Blue', 'Blue', 'Blue'],
datasets: [{
label: '# of Votes',
data: randomArray,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<button type="button" onclick="insertSort()">StartSorting</button>
<canvas id="myChart" width="400" height="400">
</canvas>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>我在 JavaScript 中构建了一个简单的插入排序算法，它对一个由十个随机整数组成的数组从最小到最大进行排序。
- 使用 Chart.js 库对结果进行可视化，将十个不同高度的条形图从最短到最高进行排序和更新。
我现在想要实现的是：可视化这个排序过程的每一步。我介绍了一个 sleep() 函数，它基本上会延迟代码执行，并且在这个 sleep() 函数之后，我调用 myChart.update() 来更新条形图。但结果不是我所期望的，事实证明，所有条形图只在此代码执行结束时更新一次，而不是在排序步骤完成时更新。
有人可以帮忙吗？我的代码可以由 C&P 作为 HTML 文件执行并在 Chrome 浏览器中运行。点击startSorting按钮对其进行排序，开发者控制台中提供了一些简单的调试信息。
【问题讨论】：
标签： javascript chart.js insertion-sort