在JavaScript中重新绘制某些内容之前，如何创建延迟？
在JavaScript中重新绘制某些内容之前，如何创建延迟？
提问于 2020-09-23 14:29:58
我是JavaScript的新手，我正在尝试创建一个可视化冒泡排序算法的程序。
其思想是通过fillRect(x，y，x，y)生成不同大小的矩形，并将高度保存到一个数组中。调用冒泡排序函数，数组通过比较高度来对自己进行排序，每次在数组中移动高度时画布都会重新绘制。
我制作的函数可以按预期工作。问题是我不知道如何在每次重绘之间创建延迟。目前，它会立即排序，并且您看不到动画。我想是不是应该用java中的睡眠？我想不出来。
到目前为止，我的代码如下：
var list = [];
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
var x = 4;
for (i = 0; i < 38; i++) {
var random = Math.floor(Math.random() * (400 - 10) + 10);
bar = ctx.fillRect(x, 4, 20, random);
list.push(random);
x += 21;
}
function bubbleSort() {
for (let i = 0; i < list.length - 1; i++) {
for (let j = 0; j < list.length - i - 1; j++) {
if (list[j] > list[j + 1]) {
let temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
ctx.clearRect(0, 0, c.width, c.height);
repaint(list);
}
}
}
}
function repaint(list) {
ctx.clearRect(0, 0, c.width, c.height);
let k = 4;
for (let i = 0; i < 38; i++) {
ctx.fillRect(k, 4, 20, list[i]);
k += 21;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bubble-sort</title>
</head>
<body>
<canvas id="myCanvas" width="805px" height="550px" style="border:2px solid #000000; margin-left:100px; margin-top: 100px; background: gray"></canvas>
<br><br>
<button type="button" onclick="bubbleSort()" style="margin-left: 100px">bubble sort</button>
<script src="bubble.js"></script>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2020-09-23 14:33:02
你可以像这样做一个延迟函数：
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));然后将您的bubbleSort函数更改为async，然后在每次迭代后几毫秒后执行await：
var list = [];
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
var x = 4;
for (i = 0; i < 38; i++) {
var random = Math.floor(Math.random() * (400 - 10) + 10);
bar = ctx.fillRect(x, 4, 20, random);
list.push(random);
x += 21;
}
async function bubbleSort() {
for (let i = 0; i < list.length - 1; i++) {
for (let j = 0; j < list.length - i - 1; j++) {
if (list[j] > list[j + 1]) {
let temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
ctx.clearRect(0, 0, c.width, c.height);
repaint(list);
await delay(200);
}
}
}
}
function repaint(list) {
ctx.clearRect(0, 0, c.width, c.height);
let k = 4;
for (let i = 0; i < 38; i++) {
ctx.fillRect(k, 4, 20, list[i]);
k += 21;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bubble-sort</title>
</head>
<body>
<canvas id="myCanvas" width="805px" height="550px" style="border:2px solid #000000; margin-left:100px; margin-top: 100px; background: gray"></canvas>
<br><br>
<button type="button" onclick="bubbleSort()" style="margin-left: 100px">bubble sort</button>
<script src="bubble.js"></script>
</body>
</html>
如果你不想使用async await等，这里有一个相当简单的方法。
仅供参考，如果你不能将函数改为async，你仍然可以像这样通过阻塞线程来实现它，但它可能会使你的CPU达到100%，这是不推荐的：
function delay(ms) {
const target = performance.now() + ms;
while(performance.now() < target) {
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64022211
复制相关文章
相似问题
腾讯云开发者
