延迟交换嵌套循环中的数组元素答案

【问题标题】：swap array elements in nested loop with delay延迟交换嵌套循环中的数组元素
【发布时间】：2015-10-25 14:36:58
【问题描述】：

我希望对我的 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 元素进行排序？你拖延的意义何在
@RamisWachtler 动画排序。我想用延迟来展示算法是如何工作的
请正确解释预期行为。不起作用的代码不能代替解释您希望该代码做什么
@charlietfl 代码有效，但它只执行第二个循环而不是第一个循环。但我需要两个循环才能使我的 div 排序

标签： javascript jquery for-loop settimeout

【解决方案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>

【讨论】：

我稍微改变了你的排序算法，所以我建议检查一下（你的可能是不同的）但是交换函数应该没问题，只要你先给它提供较小的值索引并将较大的值索引作为第二个参数。