JavaScript 队列与冒泡排序动画模拟实现

基于队列与定时器的时间差模拟

在某些特定场景下，队列机制能发挥类似奇兵的作用，带来意想不到的效果。例如，将其与定时器结合使用，可以有效模拟出时间延迟或时间差的效果。

 
function createDq(){
var dq = [], size = 0;
return {
setDq:function(queue){
dq = queue;
size = queue.length;
}, 
queue:function(fn){
size ++;
dq.push(fn);
}, 
dqueue:function(){
size --;
return dq.shift();
}, 
run:function(fn){
var me = this, timer;
timer = setInterval(function(){
if(size <= 1){
clearInterval(timer);
} 
fn.call(null,me.dqueue());
},30);
} 
} 
} 

上述代码展示了一个基础的队列实现。在实际应用中，可根据具体场景进行适当调整，以实现因地制宜的效果。

冒泡排序动画与观察者模式实现

接下来是一个冒泡排序的动画模拟示例。该实现尝试引入少量的观察者模式，整体效果良好。

 
function bubble(){
var obs = [];
function compare(x, y) {
return x.w - y.w;
} 
function swap(a, i, j) {
var t = a[i]; a[i] = a[j]; a[j] = t;
} 
function proxy(a, i, j){
notify(a[i].id + "-" + a[j].id);
swap.apply(null,arguments);
} 
function notify(arg){
obs[0].m.call(obs[0],arg);
} 
return {
addOb:function(ob){
obs.push(ob);
}, 
sort:function(arr){
var len = arr.length;
for (var x = 1; x < len; x++) {
for (var y = 0; y < len - x; y++) {
if (compare(arr[y], arr[y + 1]) > 0) {
proxy(arr, y, y + 1);
} 
} 
} 
} 
} 
} 

 <!DOCTYPE html"> <html> <style><!-- body{margin:0;padding:0;}; #mop{border:2px solid #f40;float:left;margin-left:300px;margin-top:100px;} .fac{width:10px;height:100px;float:left;list-style:none;position:absolute;} .fac a{display:block;} --></style>  <ul id="mop"></ul> </html>