在嵌套循环中交换数组元素并延迟

Question

我想要对我的div进行排序，但是在这段代码中它只能循环一次。我如何使这个结束两个循环和我的div排序？

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

看起来你只是迭代一次，因为你没有更改数组索引，你只是更新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>