javascript - 如何在 SortAlgorithm Visualization 循环内创建间隔（计时器）

Question

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

https://visualgo.net/bn/sorting

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)

标签： javascriptsettimeoutsetinterval

Answer 1

您可以使用只需少量修改的生成器：

• 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>