用原生JavaScript实现冒泡排序的可视化，setTimeout如何使用？

做了一个带数值的列表柱状图，通过比较每一项的textContent来进行冒泡排序。已经完成了一个函数绑定了点击事件，实现了上述功能。现在想把排序过程可视化，让节点变化一步一步来，不要一次执行完毕。于是想到了setTimeout函数，但是特性不熟悉，尝试了几次，都是排一次，就不动了。
代码github地址：https://github.com/wozhizui/i...

1.做了一个列表柱状图，前端显示如下：

2.用一个冒泡的原理实现了排序，可以正常完成功能。代码如下：

function sortlist() {
  var list = document.getElementsByClassName('hot');//取得整个列表
  var count = list.length;//这个列表长度
  while(count){
    for (var i = 0; i < count-1; i++) {
      if (list[i].textContent > list[i+1].textContent){
        databox.insertBefore(list[i+1],list[i]);
      }
    }
    count--;
  }
}

3.自己尝试用setTimeout实现一步一步执行。未完成。

function sortlist() {
  var list = document.getElementsByClassName('hot');
  var count = list.length;
  while(count){
    var i = 0;
    setTimeout(function(){
      if (list[i].textContent > list[i+1].textContent) {
        databox.insertBefore(list[i+1],list[i]);
      };
      i++;
      if (i<count-1) {
        setTimeout(arguments.callee,1000);
      }
    },1000);
    count--;
  }
}

---

我没有你的环境，自己网上copy了一个冒泡会慢慢打印出结果。(你主要是setTimeout时间设置相同，导致延迟相同时间触发！

var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i < array.length; i++)
{
    for (var j = 0; j < array.length - i; j++)
    {
        if (array[j] > array[j + 1])
        {
            temp = array[j + 1];
            array[j + 1] = array[j];
            array[j] = temp;
        }
    }
    setTimeout(function(){
        console.log(array + '->第' + this._idleTimeout +'毫秒。');
    },1000*i);
}

---

重写了你的sortlist，祝你玩的愉快

function sortlist() {
    var list = document.getElementsByClassName('hot');
    var count = list.length;
    var init = 0;

    var draw = function() {
        if (init === count - 1) {
            return;
        }
        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        if (list[init].textContent > list[init + 1].textContent) {
            databox.insertBefore(list[init + 1], list[init]);
        }
        ++init;
        requestAnimationFrame(draw);
    };
    draw();
// 显示当前参加排序的元素数目
// alert(databox.childNodes.length);
}

注：点一次动一次哦

---

题主可以去看看它是怎么做的 http://algo-visualizer.jasonp...