javascript - 如何逐渐设置正在(冒泡)排序的元素的样式？

Question

我有几个带有随机数的 div，我后来使用一些简单的冒泡排序代码按升序排列，我想逐渐排列并为它们添加样式，而不是对它们进行样式设置并立即安排。

这感觉很简单，但我无法找到 sleep for 循环 或正确使用setTimeout 函数的方法... 如果突出显示当前正在比较的两个 div，也会加分。

这是我到目前为止所得到的一个工作示例:

function bubbleSort(input) {
  var swapped;
  do {
    swapped = false;
    for (var i=0; i < input.length-1; i++) {
      var div1 = $('.divRandom').eq(i);
      var div2 = $('.divRandom').eq(i+1);

      if (input[i] > input[i+1]) {
        var temp = input[i];
        input[i] = input[i+1];
        input[i+1] = temp;
        arrangeDivs(div1, div2);
        swapped = true;
      }
    }
  } while (swapped);
}

function arrangeDivs(div1, div2){
  div1.before(div2);
  div1.removeClass('divUnsorted');
  div1.addClass('divSorted');
  div2.removeClass('divUnsorted');
  div2.addClass('divSorted');
}

$('.bubbleBtn').click(function() {
  var divArray = new Array();
  divArray = createArray(divArray);
  //console.log(divArray);
  bubbleSort(divArray);
  //console.log(divArray);
});

function createArray(divArray) {
  var divLength = $('.divUnsorted').length;
  for (var i = 0; i < divLength; i++){
    var divNumber = parseInt($('.divUnsorted').eq(i).text());
    divArray.push(divNumber)
  }
  return divArray;
}

$('.addDivBtn').click(function(){
  $('.divRandom').removeClass('divSorted');
  $('.divRandom').addClass('divUnsorted');
  var randomNumber = Math.floor((Math.random() * 1000) + 1);
  $('<div/>', {
    'class':'divRandom divUnsorted',
    'text':randomNumber,
  }).appendTo('.addDivRandom');

  $('.divRandom').addClass('divUnsorted');
});

.divRandom {
  display: inline-block;
  text-align: center;
  margin: 5px;
  padding: 10px;
  width: 100px;
  font-size: 20px;
}

.addDivRandom {
  text-align: center;
  margin: auto;
}

.divUnsorted {
  border: 2px solid green;
  background-color: #9db;
}

.divSorting {
  border: 2px solid darkred;
  background-color: #db9;
}

.divSorted {
  border: 2px solid darkblue;
  background-color: #9bd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="addDivRandom">
</div>
<button class="addDivBtn" style="display: block;">Add</button>
<button class="bubbleBtn" style="display: block;">Bubble</button>

Answer 1

当你做一个循环时，整个页面将不得不等到它完成后再重新获得控制权。这包括您在 DOM 中所做的任何更改，因此浏览器将等待整个执行过程以向您显示结果。

如果改为运行排序的每个步骤，安排下一步，然后将控制权交还给浏览器并重复，则可以避免这种情况。通过这种方式，您可以在排序时更新 UI。为此，您可以使用 setTimeout - 你会递归地安排你的函数，直到排序操作完成。

您的排序函数需要稍作改动 - 不会有循环，这反过来会使 swapped 变量过时。您可以通过将当前索引传递给 bubbleSort 的每次执行来跟踪当前索引。当没有东西可以排序时，你就完成了排序。我已经注释掉了不需要的代码以明确更改:

function bubbleSort(input, i = 0) {
  //nothing to sort
  if (input.length == 0) {
    console.log("sorting complete");
    return; 
  }
  //var swapped; -> not needed
  //do { -> not needed
    //swapped = false; -> not needed
    //for (var i=0; i < input.length-1; i++) { -> not needed
  var div1 = $('.divRandom').eq(i);
  var div2 = $('.divRandom').eq(i+1);

  if (input[i] > input[i+1]) {
    var temp = input[i];
    input[i] = input[i+1];
    input[i+1] = temp;
    arrangeDivs(div1, div2);
    //swapped = true; -> not needed
  }
    //} -> not needed - closes the for-loop 
    
    var next;
    if (i == input.length) {
      //loop back to the start
      next = 0;
      //exclude the last element - it's already sorted
      input = input.slice(0, -1)
    } else {
      //move the index
      next = i + 1
    }
    //schedule next step - you can change the delay to control the speed of the updates
    setTimeout(bubbleSort, 450, input, next)
  //} while (swapped); -> not needed
}

function arrangeDivs(div1, div2){
  div1.before(div2);
  div1.removeClass('divUnsorted');
  div1.addClass('divSorted');
  div2.removeClass('divUnsorted');
  div2.addClass('divSorted');
}

$('.bubbleBtn').click(function() {
  var divArray = new Array();
  divArray = createArray(divArray);
  //console.log(divArray);
  bubbleSort(divArray);
  //console.log(divArray);
});

function createArray(divArray) {
  var divLength = $('.divUnsorted').length;
  for (var i = 0; i < divLength; i++){
    var divNumber = parseInt($('.divUnsorted').eq(i).text());
    divArray.push(divNumber)
  }
  return divArray;
}

$('.addDivBtn').click(function(){
  $('.divRandom').removeClass('divSorted');
  $('.divRandom').addClass('divUnsorted');
  var randomNumber = Math.floor((Math.random() * 1000) + 1);
  $('<div/>', {
    'class':'divRandom divUnsorted',
    'text':randomNumber,
  }).appendTo('.addDivRandom');

  $('.divRandom').addClass('divUnsorted');
});

.divRandom {
  display: inline-block;
  text-align: center;
  margin: 5px;
  padding: 10px;
  width: 100px;
  font-size: 20px;
}

.addDivRandom {
  text-align: center;
  margin: auto;
}

.divUnsorted {
  border: 2px solid green;
  background-color: #9db;
}

.divSorting {
  border: 2px solid darkred;
  background-color: #db9;
}

.divSorted {
  border: 2px solid darkblue;
  background-color: #9bd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="addDivRandom">
</div>
<button class="addDivBtn" style="display: block;">Add</button>
<button class="bubbleBtn" style="display: block;">Bubble</button>

因此，除此之外 - 如果您想突出显示正在排序的 div，您可以执行以下操作 - 当您确定现在正在检查哪两个 div 时，向它们添加样式 divSorting .下次执行该函数时，删除所有 divSorting 类并突出显示接下来的两个。当您返回以重新启动计数器时，您可以使最终元素 divSorted - 它已经就位。

function bubbleSort(input, i = 0) {
  //nothing to sort
  if (input.length == 0) {  
    return; 
  }
  var div1 = $('.divRandom').eq(i);
  var div2 = $('.divRandom').eq(i+1);
  //reset all styles - we are soring different divs now
  $("div").removeClass("divSorting");
  
  //highlight the ones that are being examined now
  div1.addClass('divSorting');
  div2.addClass('divSorting');

  if (input[i] > input[i+1]) {
    var temp = input[i];
    input[i] = input[i+1];
    input[i+1] = temp;
    arrangeDivs(div1, div2);
  }
    
    var next;
    if (i == input.length-1) {
      //loop back to the start
      next = 0;
      //exclude the last element - it's already sorted
      input = input.slice(0, -1);
      //mark the last div as sorted
      $('.divRandom').eq(i).addClass("divSorted");
    } else {
      //move the index
      next = i + 1
    }
    //schedule next step - you can change the delay to control the speed of the updates
    setTimeout(bubbleSort, 450, input, next)
}

function arrangeDivs(div1, div2){
  div1.before(div2);
}

$('.bubbleBtn').click(function() {
  var divArray = new Array();
  divArray = createArray(divArray);
  //console.log(divArray);
  bubbleSort(divArray);
  //console.log(divArray);
});

function createArray(divArray) {
  var divLength = $('.divUnsorted').length;
  for (var i = 0; i < divLength; i++){
    var divNumber = parseInt($('.divUnsorted').eq(i).text());
    divArray.push(divNumber)
  }
  return divArray;
}

$('.addDivBtn').click(function(){
  $('.divRandom').removeClass('divSorted');
  $('.divRandom').addClass('divUnsorted');
  var randomNumber = Math.floor((Math.random() * 1000) + 1);
  $('<div/>', {
    'class':'divRandom divUnsorted',
    'text':randomNumber,
  }).appendTo('.addDivRandom');

  $('.divRandom').addClass('divUnsorted');
});

.divRandom {
  display: inline-block;
  text-align: center;
  margin: 5px;
  padding: 10px;
  width: 100px;
  font-size: 20px;
}

.addDivRandom {
  text-align: center;
  margin: auto;
}

.divUnsorted {
  border: 2px solid green;
  background-color: #9db;
}

.divSorting {
  border: 2px solid darkred;
  background-color: #db9;
}

.divSorted {
  border: 2px solid darkblue;
  background-color: #9bd;
}nd-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="addDivRandom">
</div>
<button class="addDivBtn" style="display: block;">Add</button>
<button class="bubbleBtn" style="display: block;">Bubble</button>