JavaScript可视化排序(冒泡)

先来看看具体效果

流程

步骤

//入口函数
$(function () {
    //需要排序的数组
    var arr = [5, 1, 3, 8, 20, 6, 70, 30,18,4,7,6,20];
    //父容器
    var ul = $(".container");
    //初始化dom
    initDOM(arr, ul);
    //排序并且获取排序状态
    var DOMStatus = sortState(arr);
    //渲染dom
    renderDom(DOMStatus,1000)
})

方法的具体实现

initDOM

//初始化DOM
function initDOM(arr,parentElement) {
    $.each(arr, function (i, ele) {
        $("<li></li>").css("height", 5 * ele).attr("flag", ele).text(ele).appendTo(parentElement);
    })
}

sortState

//排序,并且获取排序状态
function sortState(arr) {
    var count = 0;
    var state = [];
    for (let i = 0; i < arr.length; i++) {
        for (let j = 1; j < arr.length - i; j++) {
            if (arr[j] < arr[j - 1]) {
                var tmp = arr[j];
                arr[j] = arr[j - 1];
                arr[j - 1] = tmp;
                //以上是正常排序

                //记录排序次数,用来清除定时器
                count++;
                //记录每次排序的状态,用来渲染dom
                state.push(arr.slice());
            }
        }
    }
    return {
        count,
        state
    }
}

renderDOM

//渲染DOM
function renderDom(DomStatus,speed) {
    //定时器循环渲染dom
    var timer = setInterval(function () {
        //取出排序状态数组中的第一个数组,用于渲染dom
        var HeadElement = DomStatus.state.shift()||false;
        //获得所有的li
        var $li = $("li");
        //遍历每个li,设置高度状态,*5的原因是数字太小,看起来不明显,所以放大五倍
        for (let i = 0; i < $li.length; i++) {
            //设置li的高度*5
            $li.get(i).style.height = HeadElement[i] * 5 + "px";
            //设置其文本内容
            $li.get(i).innerHTML = HeadElement[i];
        }
        DomStatus.count--;
        if (DomStatus.count==0) {
            clearInterval(timer)
        }

    }, speed)
}

在做可视化的过程中遇到的坑

刚开始想法是

1.在排序的过程中设置dom的属性.但是没有延时效果,

2.想到了sleep也就是setTimeOut() 实际上,setTimeOut是异步的,当for循环完成之后,在设置已经迟了.

3.还有使用回调函数的方式去做.(有坑)

最后选择了先排序,后渲染.

时间关系没有做高亮效果,以后补上吧.(在每次记录状态的时候不是记录到数组里,记录到对象中,只需要每次交换的两个数加上flag后续判断并且添加样式)