小羊也疯狂 2017-03-20 05:06 采纳率: 100%
浏览 913
已采纳

关于js写可视化排序中核心部分settimeout和闭包联合使用的问题

我在写js写可视化排序时 其他代码都没问题 ,冒泡核心写成下面这样程序可正常执行
图片说明
但是我想让它更好的可视化:循环的时候,如果遇到前一个大于后一个,两个div红色变灰色,等待1秒,这两个div交换,这两个div又变成红色,继续下一轮循环。
我仿照图片说明
写成下图
图片说明
写的时候我就感觉有问题(用50 40 30 20 测试确实有问题),但是我不知道怎么改。
求大神帮我把这小块核心改一下,并解答下我的问题,越详细越好。
求大神帮我把这小块核心改一下,并解答下我的问题,越详细越好。
求大神帮我把这小块核心改一下,并解答下我的问题,越详细越好。
主要的问题有:1.闭包不知道写对没有。
2.settimeout的延时设置1000j我感觉有问题
3.断点检测的时候settimeout好像要等所有的ij循环完了才执行,而我显然想让它遇到一对不合格的就执行一次。不知道怎么改
源代码如下:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task2-5</title>
    <style type="text/css" >
        form{  width: 500px;  margin-left: auto;  margin-right: auto;  margin-top: 20px;  }
        div div{  width: 10px;background-color: red;display: inline-block;margin-right:1px;text-align: center;line-height: 30px;  }
        #show{  width: 500px;height: 300px;  margin-left: auto;  margin-right: auto; margin-top: 50px;}

    </style>
</head>
<body>
<form >
    <input  id="numInput" type="text" placeholder="请输入两位数的整数">
    <input  id="leftIn"  type="button" value="左侧入">
    <input  id="rightIn" type="button"  value="右侧入">
    <input  id="leftOut" type="button" value="左侧出">
    <input  id="rightOut" type="button" value="右侧出">
    <input  id="sort" type="button" value="冒泡排序">
    <input id="clear" type="button" value="清空">
</form>
<div id ="show">

</div>
<script type="text/javascript">
    //方案1:点击按钮行为增加或者删除相应的数组元素----》对数组元素遍历并改变相应的节点------》最后进行排序
    //方案2:先不设置数组  直接增减相应的节点----》待节点整体确定后,再输入数组,并进行排序
    //***************
    // ***选择方案2***
    //****************
    var show = document.getElementById("show");
    var txtinput =document.getElementById("numInput");
    var clrear = document.getElementById("clear");
    clrear.onclick = function () {
        show.innerHTML = null;
    };
    var rightOut = document.getElementById("rightOut");
    rightOut.onclick =function () {
        var divs = show.getElementsByTagName("div");
        if(divs.length==0){
            alert("还未插入数字");
        }else{
            show.removeChild(divs[divs.length-1]);
        }
    };
    var leftIn = document.getElementById("leftIn");
    leftIn.onclick = function () {
        if(verify(txtinput.value)){
            var numIn = parseInt(txtinput.value);
            //左输入:  创造节点 ---> 插入
            var addDiv = document.createElement("div");
            if(show.getElementsByTagName("div").length == 0){
            show.appendChild(addDiv);
                addDiv.style.height=numIn*2+"px";
            } else{
                show.insertBefore(addDiv,show.getElementsByTagName("div")[0] );
                addDiv.style.height=numIn*2+"px";
            }
        }
        };
    var rightIn = document.getElementById("rightIn");
    rightIn.onclick = function () {
        if (verify(txtinput.value)) {
            var numIn = parseInt(txtinput.value);
            //右输入:  创造节点 ---> 插入
            var addDiv = document.createElement("div");

            addDiv.style.height=numIn*2+"px";
            show.appendChild(addDiv);

        }
    };

        var leftOut = document.getElementById("leftOut");
        leftOut.onclick = function () {
            var divs = show.getElementsByTagName("div");
            if(divs.length==0){
                alert("还未插入数字");
            }else{
                show.removeChild(divs[0]);
            }
        };
        var sortButton =  document.getElementById("sort");
        sortButton.onclick = function () {
            var divs = show.getElementsByTagName("div");
            if(divs.length>60){
                alert("排序的元素个数不能超过60个,请删除多余的元素");
            }else{
                    sort(divs);
                }

        };
        //检验数字合法性    //存在一个问题  数字太大时溢出容器!!!  检验<100且不含其他字符
        function verify(str) {
            for (var i = 0; i < str.length; i++) {
                if ("1234567890".indexOf(str[i]) <= -1) {
                    alert("请输入100以下的整数");
                    return false;
                }
            }
            var numIn = parseInt(str);
            if (numIn >= 100) {
                alert("请输入两位数整数");
                return false;
            }
            if (numIn < 10) {
                alert("请输入两位数整数");
                return false;
            }
            return true;
        }
        //冒泡排序 从小到大
        function sort(arr) {
            var c = 0;
            for(var i = 0;i<arr.length;i++){
                for(var j=0;j<arr.length-1-i;j++){
                    if(parseInt(arr[j].style.height)>parseInt(arr[j+1].style.height)){
                        arr[j].style.backgroundColor = "#999";
                        arr[j+1].style.backgroundColor = "#999";
                        (function (j) {
                            setTimeout(function () {
                                c = arr[j].style.height;
                                arr[j].style.height = arr[j+1].style.height;
                                arr[j+1].style.height = c;
                                arr[j].style.backgroundColor = "red";
                                arr[j+1].style.backgroundColor = "red";
                            },j*1000);

                        }) (j)
                    }
                }
            }
        }
</script>
</body>
</html>
  • 写回答

5条回答 默认 最新

  • Go 旅城通票 2017-03-20 06:31
    关注

    冒泡排序需要先冒泡后再能继续下一轮的冒泡

    计时器的话是延时的,2轮for其实都是参考第一次的高度,只会生成一次需要交换位置信息,而不是依赖上一轮冒泡的结果在生成交换位置的信息,所以排不正确

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题