使用延迟交换嵌套循环中的数组元素

swap array elements in nested loop with delay

本文关键字：数组元素 嵌套循环 交换 延迟      更新时间：2023-09-26

我想对div进行排序，但在这段代码中，它只经过一次for循环。我怎样才能使它结束循环并对div进行排序?

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>

看起来你只迭代了一次，因为你没有改变数组的索引，你只是更新了div的位置，所以每次迭代数组时，它都没有改变(只是你的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>

相关文章：