js 정렬 애니메이션 시뮬레이션 버블 sorting_javascript 기술

일부 시나리오에서는 대기열이 실제로 좋은 효과를 가져올 수 있는 놀라운 힘과 같습니다. 예를 들어 타이머와 함께 사용하면 시차 효과를 시뮬레이션할 수 있습니다

코드 복사 코드는 다음과 같습니다.

function createDq(){
var dq = [], size = 0
return {
setDq:function(queue){
dq = queue;
size = queue.length;
},
queue:function(fn){
size ; push(fn);
dqueue:function(){
size --;
return dq.shift()},
run:function(fn) {
var me = this, 타이머;
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;
}
함수 교환(a, i, j) {
var t = a[i]; a[i] = a[j] = t; }
함수 프록시(a, i, j){
notify(a[i].id "-" a[j].id)
swap.apply(null,arguments); >}
함수 알림(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)
}
}
}
}
}
}

> <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> [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]