javascript - 延迟交换嵌套循环中的数组元素

Question

我希望对我的 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>

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>