可视化排序算法

Question

我想想象一种排序算法。为此，我使用jQuery和Canvas编写了这样的程序，但它不起作用。

function Draw() {
  context.clearRect(0, 0, 1500, 1000);
  context.fillStyle = "green";
  for (var k = 0; k < l; k++) {
    context.fillRect(1000 * k / l, 0, 1000 / l, resarray[k] * 1000 / l);
  }
  context.fill();
}

Bubblesort = function() {
  var flag = 1;
  while (flag) {
    flag = 0;
    for (var j = 0; j < l - 1; j++) {
      if (resarray[j] > resarray[j + 1]) {
        var tmp = resarray[j + 1];
        resarray[j + 1] = resarray[j];
        resarray[j] = tmp;
        var dfd = new $.Deferred;
        setTimeout(function() {
          Draw();
          dfd.resolve();
        }, 2);
        dfd.then(flag++);
      }
    }
  }
}

resarray是我要排序的数组。 Bubblesort()是进行冒泡排序的功能。 Draw()是显示当前数组值的函数。

每次交换时，我都希望在resarray中顺畅地显示值的变化。要应用于其他程序，我不想使用break。我该如何编写代码？