好吧,我想创建一个排序的应用程序,但是,它有点破坏我的脑海里。也许是因为想得太多了。
Okay, I am trying to create a sorting application but, its kinda busting my mind. Maybe because of thinking too much.
我想要
我想从数值数组,也许用冒泡排序排序, 我想每个迭代推到< TR>
的表
,并能够知道哪些值已经被替换
I want to sort values from an array, maybe using bubble sort
I want to push each iteration to <tr>
of a table
and be able to know which values has been replaced
什么是必须发生
在每次迭代中,我将得到值的列表 在每个列表将突出价值的影响我现在有什么
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();
})
如果可能,我想显示值一个接一个,也许设置超时吧?
If possible I wanted to display values one by one, maybe setting a timeout, right?
是的setTimeout
是,如果你想看算法的进步是一个好主意。然而,的setTimeout
只接受函数作为参数,所以排序算法的每一次迭代都必须在一个单独的函数执行。请参见下面的$ C $下一个例子(code不会产生在每次迭代的输出,而是动画的交换动作 - 但我敢肯定,你可以很容易地调整这种以满足您的需求)。
Yes, setTimeout
is a good idea if you want to "see" the algorithm's progress. However, setTimeout
only accepts functions as arguments, so each iteration of the sorting algorithm has to be performed in a separate function. See the following code for an example (the code doesn't produce output in each iteration, instead it "animates" the swapping action - but I'm sure you can easily adjust this to fit your needs).
DEMO (的jsfiddle)
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