элементы массива подкачки в вложенном цикле с задержкой

Question

Я хочу, чтобы мои divs сортировались, но в этом коде он проходит только один цикл. Как я могу сделать это, чтобы закончить как циклы, так и мои divs отсортированы?

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 func() { 
 
    for (var j = (arr.length - 1); j >= 0; j--) { 
 
    for (var i = 1; i <= j; i++) { 
 
     if (arr[i] < arr[i - 1]) { 
 
     doSetTimeout(i, j); 
 
     }; 
 
    }; 
 
    } 
 

 
    function doSetTimeout(i, j) { 
 
    setTimeout(function() { 
 
     $("#" + arr[i]).insertBefore("#" + arr[i - 1]); 
 
    }, j * i * 100); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="func()">Click</button>

Answer 1

Похоже, вы только итерацию один раз, потому что вы не изменяя индексы массива, вы просто обновление позиции Div, поэтому каждый раз, когда вы перебирать массив, он hasn» t изменено (только ваши div). Таким образом, вы всегда повторяете один и тот же массив, повторяя одни и те же изменения снова и снова. Вы должны изменить значение массива, а также изменить положение Div:

var arr = [4, 7, 1, 9, 8, 13, 6, 11]; 
 
var counter = 0; 
 

 
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 func() { 
 
    for (var j = arr.length; j > 0; j--) { 
 
    for (var i = 0; i < (arr.length-1); i++) { 
 
     if (arr[i] > arr[i + 1]) { 
 
     swap(i+1, i); 
 
     } 
 
    }; 
 
    } 
 

 
    function swap(smaller, bigger) { 
 
    var tmpBigger = arr[bigger]; 
 
    var tmpSmaller = arr[smaller]; 
 
    arr[bigger] = tmpSmaller 
 
    arr[smaller] = tmpBigger; 
 
    
 
    setTimeout(function() { 
 
     $("#" + tmpSmaller).insertBefore("#" + tmpBigger); 
 
    }, ++counter * 500); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="func()">Click</button>