JavaScript可视化排序(冒泡)

我不是女神ヾ 2022-04-03 10:00 203阅读 0赞

### 先来看看具体效果 ###

![在这里插入图片描述][20181221170153137.gif]

### 流程 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5rZWRpbmc5MzUw_size_16_color_FFFFFF_t_70]

### 步骤 ###

//入口函数
    $(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后续判断并且添加样式)

### 所有代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>BubbleSort</title>
        <script src="Jquery.js"></script>
        <script>
            //入口函数
            $(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)
            })
    
    
            //初始化DOM
            function initDOM(arr,parentElement) {
                $.each(arr, function (i, ele) {
                    $("<li></li>").css("height", 5 * ele).attr("flag", ele).text(ele).appendTo(parentElement);
                })
            }
            //排序,并且获取排序状态
            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
                }
            }
            //渲染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)
            }
        </script>
    </head>
    <body>
    <div id="app">
        <ul class="container">
        </ul>
    </div>
    </body>
    
    </html>

[20181221170153137.gif]: /images/20220403/755479cca0e9401d8b851de2a7b1c8dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5rZWRpbmc5MzUw_size_16_color_FFFFFF_t_70]: /images/20220403/faa688284a3340a288d9697eda9d95f7.png