Javascript 排序算法的可视化

我试图用d3.js可视化排序算法，但我有点卡住了。当我试图通过包含排序循环来重新绘制图形时。图表仅显示最终值。使用setInterval函数后也会发生同样的情况。我在下面包含了没有所有计时器功能的脚本（不包括settime功能）

var-arr=新数组（10,34,66,3,56,45,67,43,45,7）；
var wi=500；
var he=500；
var-temp=0；
//缩放
var canvas=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，wi）
.attr（“身高”，他）；
对于（l=9；l>0；l--）{
对于（p=0；parr[p+1]）{
互换（p，arr）；
}
}
更新标准化（arr）；
}
功能交换（n，arr）{
温度=arr[n]；
arr[n]=arr[n+1]；
arr[n+1]=温度；
}
//视觉化
函数更新可视化（xx）{
var bar=canvas.selectAll（“rect”）
.数据（xx）
.输入（）
.append（“rect”）
.attr（“高度”，功能（d）{
返回（5*d）；
})
.attr（“宽度”，10）
.attr（“x”，函数（d，i）{
返回i*20；
});
}

---

在您的代码中，您在一个过程中多次运行setTimeout函数和updateVisualization例程，这被认为是一个即时操作，因为它基本上在亚秒时间内运行，实际上不到一毫秒

当排序算法的所有执行范围都退出时，JS开始事件循环的下一个周期。基本上，它现在只是在睡觉，等待外部事件和计时器事件

最终，大约在1000毫秒后，JS开始按照您的要求使用setTimeout函数安排所有排序算法步骤。屏幕永远不会得到更新，因为所有屏幕更新代码都已在第一个事件周期中完成，排序算法也已完成

要按时获得计划的更新，您可以将循环拆分为作业块，单独计划：

以下是大部分工作应该做的： 更新屏幕； 如果需要下一步，执行该步骤并安排下一个区块

第一个区块是手动启动的，它不是由前一个区块安排的

var startChunk = function(l) {
  updatevisualization(arr);
  if (l == 0) return;
  for (p = 0; p < l; p++) {
    if (arr[p] > arr[p + 1]) {
      swap(p, arr);
    }
  }
  setTimeout(function() {
    startChunk(l - 1);
  }, 1000);
};

// Schedule the first chunk
startChunk(9);

var startChunk=函数（l）{
更新标准化（arr）；
如果（l==0）返回；
对于（p=0；parr[p+1]）{
互换（p，arr）；
}
}
setTimeout（函数（）{
startChunk（l-1）；
}, 1000);
};
//安排第一个块
startChunk（9）；

---

作为旁注，您应该使用类似于

console.log（“在“+newdate（）上有什么节目”）

调试异步代码并知道发生了什么以及何时发生。

在您的代码中，您在一个过程中多次运行setTimeout函数和updateVisualization例程，这被认为是一个即时操作，因为它基本上运行在亚秒时间内，实际上不到一毫秒

当排序算法的所有执行范围都退出时，JS开始事件循环的下一个周期。基本上，它现在只是在睡觉，等待外部事件和计时器事件

最终，大约在1000毫秒后，JS开始按照您的要求使用setTimeout函数安排所有排序算法步骤。屏幕永远不会得到更新，因为所有屏幕更新代码都已在第一个事件周期中完成，排序算法也已完成

要按时获得计划的更新，您可以将循环拆分为作业块，单独计划：

以下是大部分工作应该做的： 更新屏幕； 如果需要下一步，执行该步骤并安排下一个区块

第一个区块是手动启动的，它不是由前一个区块安排的

var startChunk = function(l) {
  updatevisualization(arr);
  if (l == 0) return;
  for (p = 0; p < l; p++) {
    if (arr[p] > arr[p + 1]) {
      swap(p, arr);
    }
  }
  setTimeout(function() {
    startChunk(l - 1);
  }, 1000);
};

// Schedule the first chunk
startChunk(9);

var startChunk=函数（l）{
更新标准化（arr）；
如果（l==0）返回；
对于（p=0；parr[p+1]）{
互换（p，arr）；
}
}
setTimeout（函数（）{
startChunk（l-1）；
}, 1000);
};
//安排第一个块
startChunk（9）；

作为旁注，您应该使用类似于

console.log（“在“+newdate（）上有什么节目”）

调试异步代码并知道发生了什么以及何时发生。

var-arr=新数组（10,34,66,3,56,45,67,43,45,7）；
var wi=500；
var he=500；
var-temp=0；
//缩放
var canvas=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，wi）
.attr（“身高”，他）；
更新标准化（arr）；
setTimeout（函数（）{
var nAr=arr.sort（函数（a，b）{返回a>b；}）；//按升序排序数字
canvas.html（“”）；//删除旧条（'rect's）
update（nAr）；//使用新的排序数组创建条（'rect'）。
}, 1000);
/*
对于（l=9；l>0；l--）{
var myVar=setTimeout（函数（）{for（p=0；parr[p+1]））{
互换（p，arr）；
}
}}, 1000);
更新标准化（arr）；
}
*/
功能交换（n，arr）{
温度=arr[n]；
arr[n]=arr[n+1]；
arr[n+1]=温度；
}
//视觉化
函数更新可视化（xx）{
var bar=canvas.selectAll（“rect”）
.数据（xx）
.输入（）
.append（“rect”）
.attr（“高度”，功能（d）{
返回（5*d）；
})
.attr（“宽度”，10）
.attr（“x”，函数（d，i）{
返回i*20；
});
}
功能更新（数字）{
canvas.selectAll（'bar'）.data（arr.exit（）.remove（）；
变量选择=画布
.选择全部（“条形”）。数据（数字）；
选择。输入（）
.append（“rect”）
.attr（“高度”，功能（d）{
返回（5*d）；
})
.attr（“宽度”，10）
.attr（“x”，函数（d，i）{
返回i*20；
});
};

var-arr=新数组（10,34,66,3,56,45,67,43,45,7）；
var wi=500；
var he=500；
var-temp=0；
//缩放
var canvas=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，wi）
.attr（“身高”，他）；
更新标准化（arr）；
设置超时（函数）(