qflyalltime
小羊也疯狂
采纳率88.4%
2017-03-20 05:06 阅读 889

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

80

我在写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条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2017-03-20 06:31

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

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

    点赞 2 评论 复制链接分享
  • u013728160 jsjzsl2 2017-03-20 08:08

    把function sort(){.......}
    换成下面的2个函数,但代码不是完美的,因为时间不均匀,所以显示的效果有快慢,数量越大,到后面,变化的越慢,可想办法消除时间误差,
    如果感觉显示的太快,可以调节时间,进行调整
    function sort(arr,i) {
    var c = 0;
    i=i==undefined?0:i;
    if(i<arr.length){
    sort1(arr,i,0);
    setTimeout(function(){
    i++;sort(arr,i)
    },(i+1)*3000);
    }
    }

    function sort1(arr,i,j) {
    j=j==undefined?0:j;
    if(j if(parseInt(arr[j].style.height)>parseInt(arr[j+1].style.height)){
    arr[j].style.backgroundColor = "#999";
    arr[j+1].style.backgroundColor = "#999";
    setTimeout(function () {
    if(parseInt(arr[j].style.height)>parseInt(arr[j+1].style.height)){
    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*500);
    }
    setTimeout(function(){
    j++;
    sort1(arr,i,j)},(j+1)*1000);
    }
    }

    点赞 评论 复制链接分享
  • u013728160 jsjzsl2 2017-03-20 08:22

    function sort(arr,i) {
    var c = 0;
    i=i==undefined?0:i;
    if(i<arr.length){
    sort1(arr,i,0);
    setTimeout(function(){
    i++;
    sort(arr,i);
    },(i+1)*3000);
    }
    }

    function sort1(arr,i,j) {
    j=j==undefined?0:j;
    if(j if(parseInt(arr[j].style.height)>parseInt(arr[j+1].style.height)){
    arr[j].style.backgroundColor = "#999";
    arr[j+1].style.backgroundColor = "#999";
    setTimeout(function () {
    if(parseInt(arr[j].style.height)>parseInt(arr[j+1].style.height)){
    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*500);

        }
    setTimeout(function(){
    j++;
    sort1(arr,i,j)},(j+1)*1000);
     }
    

    }

    点赞 评论 复制链接分享
  • u013728160 jsjzsl2 2017-03-20 08:23

    发布上去,代码不全,可能CSDN过滤了一些字符
    我截图上去

    点赞 评论 复制链接分享
  • u013728160 jsjzsl2 2017-03-20 08:29

    图片说明

    if(j 这个地方错误,你 再找找其他地方还有没有,代码测试可用。

    点赞 评论 复制链接分享

相关推荐