CODEWITHSUNDEEP
jqueryinsertion-sort
dummy
dummy

Reputation: 127

Insertion sort animation jquery

I wanna animate insertion sort with divs but it only changes 2 divs' places and after this animation stops.Animation workes fine with one for loop.So is it because of for loop or did i make mistake?

  <body>
  <button onclick="func1()">Click</button>
</body>

<script>
  var arr = [4, 7, 1, 9, 8, 13, 6, 11];

  function showarray() {

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

      var divSort = document.createElement("div");
      divSort.style.width = 30 + "px";
      divSort.style.height = 30 + "px";
      divSort.style.background = "yellow";
      divSort.style.display = "inline-block";
      divSort.style.margin = "10px";
      divSort.id = arr[i];
      divSort.innerHTML = arr[i];
      document.body.appendChild(divSort); }}

  showarray();

  function func1(){

    for (var i=1;i<arr.length;i++){
        var index = arr[i]; 
              var j = i;
      while (j > 0 && arr[j-1] > index){
       arr[j] = arr[j-1];
            j--;}
         doSetTime(i,j);} }


   function doSetTime(i,j) {
    setTimeout(function() {
      $("#" + arr[j]).insertBefore("#" + arr[i]);
    }, i * 1000);}
</script>

Upvotes: 1

Views: 212

Answers (1)

guest271314
guest271314

Reputation: 1

div elements should be sorted

according their id

Try using Array.prototype.slice() to create copy of arr array , Math.min() to sort copied array from minimum value to maximum value , Array.prototype.splice() to remove appended item from copied array , .appendTo()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<body>
  <button onclick="func1()">Click</button>
</body>

<script>
  var arr = [4, 7, 1, 9, 8, 13, 6, 11];

  function showarray() {

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

      var divSort = document.createElement("div");
      divSort.style.width = 30 + "px";
      divSort.style.height = 30 + "px";
      divSort.style.background = "yellow";
      divSort.style.display = "inline-block";
      divSort.style.margin = "10px";
      divSort.id = arr[i];
      divSort.innerHTML = arr[i];
      document.body.appendChild(divSort);
    }
  }

  showarray();

  var copy = arr.slice();

  function func1() {
    var min = Math.min.apply(Math, copy);
    doSetTime(min);
    copy.splice(copy.indexOf(min), 1);
  }

  function doSetTime(i) {
    setTimeout(function() {
      $("#" + i).appendTo("body");
      if (copy.length) {
        func1()
      }
    }, 1000);
  }
</script>

Alternatively , create a container element to append elements to

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<body>
  <button onclick="func1()">Click</button>
</body>
<div id="container"></div>

<script>
  var arr = [4, 7, 1, 9, 8, 13, 6, 11];

  function showarray() {

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

      var divSort = document.createElement("div");
      divSort.style.width = 30 + "px";
      divSort.style.height = 30 + "px";
      divSort.style.background = "yellow";
      divSort.style.display = "inline-block";
      divSort.style.margin = "10px";
      divSort.id = arr[i];
      divSort.innerHTML = arr[i];
      document.body.appendChild(divSort);
    }
  }

  showarray();

  var copy = arr.slice();

  function func1() {
    var min = Math.min.apply(Math, copy);
    doSetTime(min);
    copy.splice(copy.indexOf(min), 1);
  }

  function doSetTime(i) {
    setTimeout(function() {
      $("#" + i).appendTo("#container");
      if (copy.length) {
        func1()
      }
    }, 1000);
  }
</script>

Upvotes: 1

Related Questions