Reputation: 127
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
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