JavaScript可视化排序(冒泡)

最新推荐文章于 2024-04-21 09:41:37 发布

清水l

最新推荐文章于 2024-04-21 09:41:37 发布

阅读量907

点赞数

分类专栏： JavaScript原生案例文章标签：可视化排序 JavaScript 冒泡

本文链接：https://blog.csdn.net/shenkeding9350/article/details/85165094

版权

JavaScript原生案例专栏收录该内容

8 篇文章 0 订阅

订阅专栏

先来看看具体效果

在这里插入图片描述

流程

在这里插入图片描述

步骤

//入口函数
$(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>

清水l

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript可视化排序(冒泡)

先来看看具体效果流程步骤//入口函数$(function () { //需要排序的数组 var arr = [5, 1, 3, 8, 20, 6, 70, 30,18,4,7,6,20]; //父容器 var ul = $(&quot;.container&quot;); //初始化dom initDOM(arr, ul); //排序并且获取排序状态...
复制链接

扫一扫