冒泡排序需要先冒泡后再能继续下一轮的冒泡
计时器的话是延时的，2轮for其实都是参考第一次的高度，只会生成一次需要交换位置信息，而不是依赖上一轮冒泡的结果在生成交换位置的信息，所以排不正确
小羊也疯狂
采纳率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条回答 默认 最新
- 已采纳 点赞 2 评论 复制链接分享
-
把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);
}
}点赞 评论 复制链接分享 -
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); }}
点赞 评论 复制链接分享 -
发布上去，代码不全，可能CSDN过滤了一些字符
我截图上去点赞 评论 复制链接分享 -
if(j 这个地方错误，你 再找找其他地方还有没有，代码测试可用。
点赞 评论 复制链接分享