Javascript排序算法，jQuery的也許

Question

好吧，我正在嘗試創建一個排序應用程序，但它，有點破壞我的思想。也許是因爲思考太多。

我想

1. 我希望值從一個數組，也許用冒泡排序排序
2. 我想每個迭代推到桌子
3. 的<tr>並能夠知道哪些值已被替換

什麼必須發生

1. 每次迭代時，我會得到
2. 每個列表將突出值的影響

我現在有

var sort = { 
    init : function() { 
     sort.vars.$oldList = [6,4,7,1,8]; 
     sort.play.bubble(); 
    } 
} 

sort.vars = { 
    $oldList : new Array(), 
    $newList : new Array() 
} 

sort.play = { 
    bubble : function() { 
     var list = sort.vars.$oldList; 
     var n = list.length; 
     var isSorted = false; 
     while(!isSorted) { 
      var tmp, i; 
      isSorted = true; 
      for (i = 0; i < n; i++) { 
       if (list[i] > list[i+1]) { 
        tmp = list[i]; 
        list[i] = list[i+1]; 
        list[i+1] = tmp; 
        isSorted = false; 
       } 
       sort.ui.pushtToTable(list); 
      } 
     }   
    } 
} 

sort.ui = { 
    pushtToTable : function(list) { 
     $.each(list, function(n, val){ 
      $('tr').append('<td>' + val); 
     }) 
    } 
} 

$(document).ready(function(){ 
    sort.init(); 
}) 

如果可能的話我希望值的列表逐個顯示值，可能會設置超時值，對嗎？

Answer 1

是的，setTimeout是一個好主意，如果你想「看」算法的進展。但是，setTimeout只接受函數作爲參數，因此排序算法的每次迭代都必須在單獨的函數中執行。有關示例，請參閱以下代碼（代碼不會在每次迭代中生成輸出，而是它會「動畫」交換動作 - 但我相信您可以輕鬆調整以適應您的需要）。

DEMO (JSFiddle)

var SORT = function(type, list, selector){ 
    var container, containerTr, animSteps = []; 
    // Show all elements in the container 
    var printArray = function(list){ 
     var str = ["<table>"], i = 0, l = list.length; 
     for (i; i < l; ++i) { 
      str.push("<tr><td>", list[i], "</td></tr>"); 
     } 
     str.push("</table>"); 
     container.html(str.join("")); 
    }; 
    // This is the interesting part... ;) 
    var swap = function(list, i1, i2) { 
     var tmp = list[i1]; 
     list[i1] = list[i2]; 
     list[i2] = tmp; 
     // Add 3 functions for each swapping action: 
     // 1. highlight elements, 2. swap, 3. remove highlight 
     animSteps.push(function(){ 
      containerTr.eq(i1).add(containerTr.eq(i2)).addClass("highlight"); 
     }, function(){ 
      var tmp = containerTr.eq(i1).text(); 
      containerTr.eq(i1).text(containerTr.eq(i2).text()); 
      containerTr.eq(i2).text(tmp); 
     }, function(){ 
      containerTr.eq(i1).add(containerTr.eq(i2)).removeClass("highlight"); 
     }); 
    }; 
    var animation = function(){ 
     // Execute all iteration functions one after another 
     if (animSteps.length) { 
      setTimeout(function(){ 
       animSteps.splice(0,1)[0](); 
       animation(); 
      }, 250); 
     } 
    }; 

    // Collection of sorting algorithms 
    var algorithms = { 
     bubblesort: function(list) { 
      for (var n = list.length; n > 1; --n) { 
       for (var i = 0; i < n-1; ++i) { 
        if (list[i] > list[i+1]) { 
         swap(list, i, i+1); 
        } 
       } 
      } 
     } 
     // Add more algorithms using "swap" here... 
    }; 

    if (algorithms[type] != undefined) { 
     container = $(selector); 
     printArray(list); 
     containerTr = container.find("tr"); 
     algorithms[type](list); 
     this.sorted = list; 
     animation(); 
    } 
}; 

// Usage: 
var s = new SORT("bubblesort", [5,8,2,4,1,9,7,3,0,6], "#container"); 
console.log(s.sorted); //the sorted array