JQuery

Question

我有一个函数可以对各种 div 的内容进行冒泡排序。对于每个交换操作，它也会交换 div，使用 JQuery Swapsies plugin。问题是它进行一次交换，然后进行其他交换操作：

function swap(id1, id2){

$('#' +id1).swap({
  target: id2,
  opacity: "0.5",
  speed: 1000,
  callback: function() {


  }
});

}

function bubbleSort() {

var ret=[];
$(".num-div").each(function(){ ret.push($(this));});

let swapped;
do {
  swapped = false;
  for (let i = 1; i < ret.length; ++i) {

    if (ret[i - 1].html() > ret[i].html()) {
      swap(ret[i-1].attr('id'), ret[i].attr('id'));
      [ret[i], ret[i - 1]] = [ret[i - 1], ret[i]];

      swapped = true;

    }
  }
} while (swapped);
return ret;

}

在 i=1 的第一步中，它工作并将 ret[i-1] 与 ret[i] 交换，但之后它不起作用。

Answer 1

swap 插件在忙于动画时将不会处理调用。在插件的source code中可以看到：

if (options.target!="" && !swapping) {

swapping 变量在正在进行的动画期间将是 true，而 if 将跳过任何新动画，恕不另行通知。

无论如何，您可能希望动画按顺序发生，而不是同时发生。为此，我建议使用 promises 和相当新的 async/await 语法。

首先你要承诺 swap 函数，所以它 returns 是一个承诺。然后在适当的位置添加 async 和 await 关键字，然后......它会起作用。

还有一点要注意：如果您的数据是数字，并且您想按数值排序，则需要在进行比较之前将字符串转换为数字，例如通过像这样应用一元 + ： +ret[i].text()

这是一个工作演示：

function swap(id1, id2){
    return new Promise(resolve => 
        $('#' +id1).swap({
          target: id2,
          opacity: "0.5",
          speed: 500,
          callback: resolve
        })
    );
}

async function bubbleSort() {
    var ret=[];
    $(".num-div").each(function(){ 
        ret.push($(this));
    });

    let swapped;
    do {
        swapped = false;
        for (let i = 1; i < ret.length; ++i) {
            if (ret[i - 1].text() > ret[i].text()) {
                await swap(ret[i-1].attr('id'), ret[i].attr('id'));
                [ret[i], ret[i - 1]] = [ret[i - 1], ret[i]];
                swapped = true;
            }
        }
    } while (swapped);
    return ret;
}

bubbleSort().then( ret => {
    console.log($.map(ret, x => $(x).text()));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://biostall.com/wp-content/uploads/2010/07/jquery-swapsies.js"></script>
<div id="i1" class="num-div">sort</div>
<div id="i2" class="num-div">these</div>
<div id="i3" class="num-div">words</div>
<div id="i4" class="num-div">in</div>
<div id="i5" class="num-div">alphabetical</div>
<div id="i6" class="num-div">order</div>

JQuery - 第一次移动后交换两个元素不起作用

JQuery - Swapping two elements does not work after first move

javascript

bubble-sort