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

Question

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

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 将跳过任何新动画，恕不另行通知。

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

首先，您将 promise swap 函数，因此它返回一个 promise 。然后，您在适当的位置添加 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>