for循环中使用setInterval动画没有一个个执行，而是异步执行

for循环中使用setInterval动画没有一个个执行，而是异步执行
全部代码http://codepen.io/sunopar/pen/RaBoNK

问题代码：

function animate1(ele, start, to) {
    var len = parseInt(ele.style.height);
    if (len === to) {
        // element[j].style.backgroundColor = 'red';
        // element[j + 1].style.backgroundColor = 'red';
        return;
    } else if (start < to) {
        ele.style.height = ++len + 'px';
    } else {
        ele.style.height = --len + 'px';
    }
}

function animate2(ele, start, to) {
    var len = parseInt(ele.style.height);
    if (len === to) {
        // element[j].style.backgroundColor = 'red';
        // element[j + 1].style.backgroundColor = 'red';
        cleanInterval(animation);
    } else if (start < to) {
        ele.style.height = ++len + 'px';
    } else {
        ele.style.height = --len + 'px';
    }
}

function handlerAnimate(ele1, ele2, start, end) {
    (function() {
        var animation = setInterval(function() {
            animate1(ele1, start, end);
            animate2(ele2, end, start);
        }, 10);
    })();
}

function sortNumber(arr, element) {
    var len = arr.length,
        temp = -Infinity;
    for (var i = 1; i < len; i++) {
        for (var j = 0; j < len - i; j++) {
            if (arr[j] > arr[j + 1]) {

                handlerAnimate(element[j], element[j + 1], arr[j], arr[j + 1]);
            } else {
                // element[j].style.backgroundColor = 'red';
                // element[j + 1].style.backgroundColor = 'red';

            }
        }
    }
    return arr;
}

function renderSort() {

    var Li = document.querySelectorAll('li'),
        liLen = Li.length,
        storeLi = [];
    for (var i = 0; i < liLen; i++) {
        storeLi[i] = parseInt(Li[i].style.height);
    }
    sortNumber(storeLi, Li);
}

我是想用可视化的方法来看冒泡排序是如何执行的。可是他们是同步执行的，而且执行的很乱。。。

---

setInterval和setTimeout都是异步函数，你要同步执行，然后每执行一次等待10秒？还是什么意思？用sleep函数等待执行可以解决你的问题吗？