JQuery - Swapping zwei Elemente funktioniert nicht nach dem ersten Zug

Question

Ich habe eine Funktion, um eine Blase sortieren unter Inhalt von verschiedenen div s. Für jede Swap-Operation tauscht sie auch die divs mit JQuery Swapsies plugin. Das Problem ist, tht macht es den Swap einmal, und danach für andere Swap-Operationen:

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; 

}

Im ersten Schritt, wo i=1 es funktioniert und Swaps ret[i-1] mit ret[i], aber nach, dass es nicht Arbeit.

Answer 1

Das Plug-in swap verarbeitet keine Anrufe, wenn es mit einer Animation beschäftigt ist.

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

Die swapping Variable true während einer laufenden Animation sein wird, und dass if wird nur jede neue Animation fristlos überspringen: Sie können in den source code der Plug-in, dass.

Wie auch immer, Sie möchten wahrscheinlich, dass die Animationen nacheinander und nicht alle gleichzeitig ablaufen. Zu diesem Zweck würde ich vorschlagen, Versprechungen und die ziemlich neue async/await Syntax zu verwenden.

Zuerst würden Sie die swap Funktion promiden, so dass es ein Versprechen zurückgibt. Dann fügen Sie die async und await Schlüsselwörter an der entsprechenden Stelle hinzu, und ... es wird funktionieren.

Noch eine Verwarnung: Wenn Ihre Daten numerisch sind, und Sie mögen von numerischem Wert sortieren, müssen Sie zum Beispiel, bevor Sie den Vergleich von Strings in Zahlen konvertieren, indem die einstelligen + wie diese Anwendung: +ret[i].text()

hier ist ein funktionierendes Demo:

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>