如何应用setTimeout函数来延迟bubbleSort算法？

Question

This is my code for bubble sort algorithm simulator. 这是我的冒泡排序算法模拟器代码。 Algorithm works and prints output correctly. 算法工作并正确打印输出。 But I want to delay each step for 2 seconds and then display output. 但是我想将每个步骤延迟2秒，然后显示输出。 That means I want to delay each iteration of inner for loop of bubble sort. 这意味着我想延迟气泡排序的内部for循环的每次迭代。 Thank you. 谢谢。

    <!DOCTYPE html>
<html>
<head>

<style>
input[type=text], select {
    width: 60px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=button] {
    width: 70px;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=button]:hover {
    background-color: #45a049;
}

div {
    width:500px;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin:0 auto;
}
Canvas{
      padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    display: block; 
    border-radius: 5px;
    background-color: #f2f2f2;




}
#pp{
width:300px;
margin-left:3px;    

}
#alltext{
height:300px;
width:500px;    

}


</style>
</head>
<body>

<h3 align="center"style="text-decoration:underline">Algoritham Simulator</h3>

<div align="center">
  <form >
    <label >Insert Numbers     </label>
    <input id="pp" type="text"  >


    <input type="button" onClick="myMove()" value="Sort" >




  </form>

</div>

<canvas id="myCanvas" height="10000" width="900">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var height1 = 10;
var height2 = 50;
var count =0;
 var canvas;
 var ctx;

function setCanvas(){

  canvas = document.getElementById('myCanvas');
   ctx = canvas.getContext('2d');
        ctx.canvas.height =10000;
        ctx.canvas.width = 900;


}

function draw(cars,j){


        height1+=85;  
        height2+=85;
        count++;

        var rectSize = 80;
        var horizontalGap=1;



        for(var i=0;i<cars.length;i++) {


            if(i==j || i==j+1){
            ctx.beginPath();
            ctx.fillStyle="green";
            ctx.fillRect((rectSize+horizontalGap),height1,rectSize,rectSize); 

            ctx.closePath();
            ctx.fillStyle="white"; 
            }else{
            ctx.beginPath();
            ctx.fillStyle="black";
            ctx.fillRect((rectSize+horizontalGap),height1,rectSize,rectSize); 
            ctx.closePath();
            ctx.fillStyle="white"; 
            }


            var text = cars[i];

            ctx.fillText(text, (rectSize+40)+horizontalGap ,height2);

            horizontalGap+=100;  


        }



}


function myMove() {
    setCanvas();
    var yourArray = [];
    var inputText = document.getElementById("pp").value;
    yourArray=inputText.split(",");


    bubbleSort(yourArray);
}


function bubbleSort(items) {
  var length = items.length;

  for (var i = 0; i < length; i++) { //Number of passes

   var c=0;
        for (var j = 0; j < (length - i - 1); j++) { //Notice that j < (length - i)
      //Compare the adjacent positions

     if(items[j] > items[j+1]) {
        //Swap the numbers
        var tmp = items[j];  //Temporary variable to hold the current number
        items[j] = items[j+1]; //Replace current number with adjacent number
        items[j+1] = tmp; //Replace adjacent number with current number
      }     
      }

  draw(items,j);     
  }

}



</script>

</body>
</html>

Answer 1

You can't just pause a JS script, but you can use setTimeout() to queue up a function to be run after a given delay. 您不仅可以暂停JS脚本，还可以使用setTimeout()将要在给定延迟后运行的函数排队。 Which means you can use setTimeout to build a sort of pseudo-loop with a delay for each iteration. 这意味着您可以使用setTimeout构建某种伪循环，每次迭代都有延迟。

Following is a conversion of your original nested for loop function to work with setTimeout() . 以下是原始嵌套for循环函数与setTimeout() 。

I haven't tried to hook this into your existing draw() code that uses a canvas - to keep the code in the answer short I'm just calling my own simple draw() for demo purposes when you click "Run code snippet" - but it should give you the general idea. 我没有尝试将其挂接到您使用画布的现有draw()代码中-为了使代码在答案中保持简短，当您单击“运行代码段”时，我只是出于演示目的调用我自己的简单draw() -但这应该可以为您提供总体思路。 (For demo purposes I've used a much shorter delay than you asked for, but obviously you can change that.) （出于演示目的，我使用的延迟比您要求的要短得多，但是显然您可以更改它。）

 function animatedBubbleSort(items, drawCallback) { var i = 0; var j = 0; var length = items.length; (function nextIteration() { if (j >= length - i - 1) { j = 0; i++; } if (i < length) { if (items[j] > items[j+1]) { // swap items var temp = items[j]; items[j] = items[j+1]; items[j+1] = temp; drawCallback(items, j+1); } j++; setTimeout(nextIteration, 100); } else // finished drawCallback(items); })(); } var values = [13, 12, 1, 19, 20, 4, 6, 2, 18, 15, 3, 7, 14, 17, 5, 9, 16, 11, 8, 10]; animatedBubbleSort(values, function draw(items, j) { document.getElementById("output").innerHTML = items.map(function(v, i) { return i===j ? "<span>" + v + "</span>" : v; }).join(", "); });

 span { color: red; }

 <div id="output"></div>

如何应用setTimeout函数来延迟bubbleSort算法？

问题描述

1 个解决方案

解决方案1
1 2016-08-31 04:15:28

如何应用setTimeout函数来延迟bubbleSort算法？

问题描述

1 个解决方案

解决方案1 1 2016-08-31 04:15:28

解决方案1
1 2016-08-31 04:15:28