-1
我們正在研究排序算法的可視化，需要添加睡眠和等待邏輯以幫助可視化所選元素以及與其進行比較的元素。找到li'l bit後，我們發現了一個代碼「function sleep（milliseconds）{...}」，它應該按照需要工作，但目前失敗了。如何在javascript中添加睡眠和等待邏輯
在函數insertionSort（）{...}中，當前元素用紅色表示，與之比較的元素用藍色表示，一旦當前元素與另一個元素交換顏色該元件被再次改變爲從藍色白色（正常工作，經覈實使用調試器），但是在執行過程中，這些顏色轉換爲不可見（只顯示紅色元件每次迭代之後）
var element = function(value, color)
{
this.value = value;
this.color = color;
};
var x = [];
x[0] = new element(2, "white");
x[1] = new element(1, "white");
x[2] = new element(5, "white");
x[3] = new element(4, "white");
x[4] = new element(3, "white");
x[5] = new element(7, "white");
x[6] = new element(6, "white");
x[7] = new element(8, "white");
x[8] = new element(10, "white");
x[9] = new element(9, "white");
var i = 1;
var context;
var delayTime = 1000;
function myFunction()
{
\t var bar = document.getElementById("bar");
\t width = bar.width;
\t height = bar.height;
\t context = bar.getContext("2d");
\t window.setInterval(insertionSort, 3000);
}
function insertionSort()
{
if(i>=0 && i<x.length)
{
\t
\t \t var j = i;
\t \t x[j].color = "red";
\t \t drawGraph(j);
\t \t while(j>0 && x[j-1].value > x[j].value)
\t \t {
\t \t
\t \t \t x[j-1].color = "blue";
\t \t \t x[j].color = "red";
\t \t \t drawGraph();
\t \t \t //need to add delay here
\t \t \t sleep(delayTime);
\t \t \t //swap
\t \t \t var temp = x[j];
\t \t \t x[j] = x[j-1];
\t \t \t x[j-1] = temp;
\t \t \t drawGraph();
\t \t \t // and here...
\t \t \t sleep(delayTime);
\t \t \t
\t \t \t x[j].color = "white";
\t \t \t drawGraph();
\t \t \t
\t \t \t j = j-1;
\t \t }
\t \t x[j].color = "white";
\t \t i++;
\t }
\t else if(i>=x.length)
\t {
\t \t for(k=0;k<x.length;k++)
\t \t {
\t \t x[k].color = "white";
\t }
\t drawGraph();
\t i=-1;
\t }
}
function sleep(milliseconds)
{
\t var start = new Date().getTime();
\t for (var i = 0; i < 1e7; i++)
\t {
\t if ((new Date().getTime() - start) > milliseconds)
\t {
\t \t break;
\t }
\t }
}
function drawGraph()
{ \t
\t context.StrokeStyle = "black";
\t context.clearRect (0 , 0 , width, height);
for(k=0;k<x.length;k++)
{
\t \t context.fillStyle = x[k].color;
\t \t //x and y coordinate of top left corner of rectangle
\t context.strokeRect(400+k*20, 18, 20, x[k].value*10);
\t context.fillRect(400+k*20, 18, 20, x[k].value*10);
\t
}
}<html>
<head>
<script language="javascript" type="text/javascript" src="../p5.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
\t <!--<script language="javascript" src="../addons/p5.dom.js"></script>-->
<!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<canvas id="bar" width="1000" height="400" style="border:2px"></canvas>
</body>
</html>
請[編輯]你的問題來解釋*完全*這個功能是如何失敗。感謝您提高問題的參考價值並使其更具責任感！ –
done ..感謝您指出 –