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

我有一个函数，可以对各种

div

s的内容进行冒泡排序。对于每个交换操作，它也使用JQuery交换插件交换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;

函数交换（id1、id2）{
$（'#'+id1）.swap({
目标：id2，
不透明度：“0.5”，
速度：1000，
回调：函数（）{
}
});
}
函数bubbleSort（）{
var-ret=[]；
$（.num div”）.each（function（）{ret.push（$（this））；}）；
让我们交换；
做{
交换=假；
对于（设i=1；iret[i].html（））{
交换（ret[i-1].attr（'id'）、ret[i].attr（'id'）；
[ret[i]，ret[i-1]=[ret[i-1]，ret[i]]；
交换=真；
}
}
}while（交换）；
返回ret；

}

---

在

i=1

的第一步中，它工作并用

ret[i]

交换

ret[i-1]

，但在这之后它就不工作了。

swap

插件在处理动画时不会处理调用。您可以在插件的中看到：

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

在正在进行的动画期间，

swapping

变量将为

true

，而

if

将跳过任何新动画而不另行通知

无论如何，您可能希望动画按顺序进行，而不是同时进行。为此，我建议使用Promissions和全新的

async/await

语法

首先，您将承诺使用

swap

函数，因此它将返回一个承诺。然后在适当的位置添加

async

和

wait

关键字，然后。。。它会起作用的

还有一个警告：如果您的数据是数字的，并且希望按数值排序，则需要在进行比较之前将字符串转换为数字，例如，通过如下方式应用一元

+

：

+ret[i].text（）

下面是一个工作演示：

函数交换（id1、id2）{
返回新承诺（解决=>
$（'#'+id1）.swap({
目标：id2，
不透明度：“0.5”，
速度:500,，
回调：解析
})
);
}
异步函数bubbleSort（）{
var-ret=[]；
$（“.num div”）.each（function（）{
ret.push（$（此））；
});
让我们交换；
做{
交换=假；
对于（设i=1；iret[i].text（））{
等待交换（ret[i-1].attr（'id'）、ret[i].attr（'id'）；
[ret[i]，ret[i-1]=[ret[i-1]，ret[i]]；
交换=真；
}
}
}while（交换）；
返回ret；
}
bubbleSort（）。然后（ret=>{
log（$.map（ret，x=>$（x.text（））；
});

分类
这些
话
在里面
按字母顺序排列的
订单
ret的结果输出是什么？这似乎是一个异步问题。也许，
ret[i-1].html（）
应该是
parseInt（ret[i-1].text（））
？此外，对于冒泡排序，如果进行交换，则必须返回一次迭代。它是已排序的数组。它应该使用swap（）函数对数组进行排序并置换div。