如何在 SortAlgorithm 可视化循环中创建间隔（计时器）

Question

我想创建一个显示排序算法步骤的程序，例如：

https://www.youtube.com/watch?v=kPRA0W1kECg

我的问题是我无法创建间隔计时器来查看排序算法的步骤

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var array = [10, 150, 17, 200, 300, 110, 400, 260, 105, 157, 180, 208, 400, 122, 40, 266, 123];

drawnLines(array);

function init() {
  bubbleSort(array);
  ctx.clearRect(0, 0, 800, 500)
  drawnLines(array);
}

function drawnLines(array) {
  let width;
  let position = 5;

  for (i = 0; i < array.length; i++) {
    width = array[i];
    ctx.fillRect(position, 5, 10, width);
    ctx.stroke();
    position += 20;
  }
};

function bubbleSort(array) {
  var swapped;
  do {
    swapped = false;
    for (var i = 0; i < array.length - 1; i++) {
      setTimeout(function(y) {
        if (array[i] > array[i + 1]) {
          var temp = array[i];
          array[i] = array[i + 1];
          array[i + 1] = temp;
          swapped = true;
        }
        console.log(array[i])
      }, i * 2000, i)
    }
  } while (swapped);
};

<script src="https://cdn.jsdelivr.net/npm/sketch-js@1.1.3/js/sketch.min.js"></script>

<canvas id="myCanvas" width="800" height="500"></canvas>
<button type="button" onclick="init()">Bubble Sort</button>

///output:
    123
(2) 123
(3) 123
(4) 123
...
(only the last number in my array)

Answer 1

您可以使用 generators 稍作修改：

yield 在你的排序算法中
next() 然后 await sleepSomeTime 在 init

  
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var array = [10, 150, 17, 200, 300, 110, 400, 260, 105, 157, 180, 208, 400, 122, 40, 266, 123];

drawnLines(array);
function sleep(ts){
  return new Promise((resolve, reject) => {
    return setTimeout(resolve, ts)
  })
}
async function init() {
  const it = bubbleSort(array)
  let result = it.next()
  while (!result.done) {
    ctx.clearRect(0, 0, 800, 500)
    drawnLines(array);
    result = it.next();
    await sleep(100)
  }
  console.log('finished!')
}

function drawnLines(array) {
  let width;
  let position = 5;

  for (i = 0; i < array.length; i++) {
    width = array[i];
    ctx.fillRect(position, 5, 10, width);
    ctx.stroke();
    position += 20;
  }
};

function* bubbleSort(array) {
  var swapped;
  do {
    swapped = false;
    for (var i = 0; i < array.length - 1; i++) {
      if (array[i] > array[i + 1]) {
        var temp = array[i];
        array[i] = array[i + 1];
        array[i + 1] = temp;
        swapped = true;
        yield
      }
    }
  } while (swapped);
};

<script src="https://cdn.jsdelivr.net/npm/sketch-js@1.1.3/js/sketch.min.js"></script>

<canvas id="myCanvas" width="800" height="500"></canvas>
<button type="button" onclick="init()">Bubble Sort</button>

Answer 2

我使用了异步生成器和异步处理函数。您在处理函数中实现您的逻辑，而生成器进行计时并为您提供数组索引 a、b 和布尔值交换.

var array = [10, 150, 17, 266, 123, 300];
async function* bubbleSortGenerator(array) {
  var arr = array.slice(0);
  var straight = false;
  const end = arr.length - 1;
  var iterations = 0;
  while (!straight) {
    straight = true;
    for (var i = 0; i < end - iterations; i++) {
      var swapped = false;
      if (arr[i] > arr[i + 1]) {
        const tmp = arr[i + 1];
        arr[i + 1] = arr[i];
        arr[i] = tmp;
        swapped = true;
        straight = false;
      }
      await new Promise(resolve => setTimeout(resolve, 200)); //here
      yield {
        a: i,
        b: i + 1,
        swapped: swapped
      };
    }
    iterations++;
  }
  yield arr;
}
async function process() {
  for await (const val of bubbleSortGenerator(array)) {
    console.log(val);
  }
}
process();

如何在 SortAlgorithm 可视化循环中创建间隔（计时器）

How to create a interval (timer) within loop to SortAlgorithm Visualization

javascript

settimeout

setinterval