js 排序动画模拟 冒泡排序

而在某些场景中，队列确实像一支奇兵，可以带来不错的效果，比如配合定时器使用，可以模拟时间差效果


代码如下:

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);
}
}
}
}
}
}

0) {
proxy(arr, y, y + 1);
}
}
}
}
}
}
var jOne = {
each:function(obj,callback){
var i = 0,len = obj.length;
for(var value = obj[0];
i > 0;
}

//-->

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JavaScript实现各种排序的代码详解

    冒泡排序 function Bubble(arr){ var temp; for(var i=0;i<arr.length-1;i++){ for(var j=i+1;j<arr.length;j++){ if(arr[i]>arr[j]){ temp=arr[i]; arr[i]=arr[j]; arr[j]=temp; } } } return arr; } console.log(Bubble([2,5,1,0,6,2])) //[0,1,2,2,5,6] 选择排序 functio

  • js排序动画模拟-插入排序

    0 && (t > 0; } //--> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript中数组的冒泡排序使用示例

    复制代码 代码如下: <html> <head> <title>数组的排序</title> <script> var arr = [2,4,9,11,6,3,88]; //采用冒泡排序,向上冒泡,最小值在最上边 for(var x = 0 ; x < arr.length; x++){//控制趟数 for(var y = x + 1 ; y < arr.length ; y++){ //依次比较,如果后面的元素大于前面的元素则交换 i

  • JavaScript 冒泡排序和选择排序的实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所述: var array = [1,2,3,4,5]; // ---> 服务 //效率 ---> 针对一个有序的数组 效率最高 //标志 true false for(var j = 0; j < array.length - 1;j++ ){ //- j 每次排序完成之后 后面减少比较的次数 var isTrue = true; //如果数组本身就是升序,则直接输出 for(var i = 0; i < array.length -

  • 使用Javascript实现选择下拉菜单互移并排序

    使用Javascript实现选择下拉菜单互移并排序

    本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,先给大家展示下效果图,感觉还很满意请参考本段代码. 代码如下: <html> <head> <title>使用Javascript实现选择下拉菜单互移并排序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <

  • JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

    本文实例总结了JS数组排序技巧.分享给大家供大家参考,具体如下: ① 冒泡排序 bubbleSort:function(array){ var i = 0, len = array.length, j, d; for(; i<len; i++){ for(j=0; j<len; j++){ if(array[i] < array[j]){ d = array[j]; array[j] = array[i]; array[i] = d; } } } return array; } ② js

  • JS实现冒泡排序，插入排序和快速排序并排序输出

    JS实现冒泡排序，插入排序和快速排序并排序输出

    在一次面试中被问到了此问题,但是真是懵了,没能回答上来,后来通过JS整理了一下,在结合html代码做了一个文本框,把输入的内容从文本框排序输出,再次不做叙述了,下面通过一段代码给大家展示下: 以下是代码: index.html <!DOCTYPE html> <html> <head> <title>Sorting</title> <link rel="stylesheet" type="text/css&qu

  • javascript数据结构之双链表插入排序实例详解

    本文实例讲述了javascript数据结构之双链表插入排序实现方法.分享给大家供大家参考,具体如下: 数组存储前提下,插入排序算法,在最坏情况下,前面的元素需要不断向后移,以便在插入点留出空位,让目标元素插入. 换成链表时,显然无需做这种大量移动,根据每个节点的前驱节点"指针",向前找到插入点后,直接把目标值从原链表上摘下,然后在插入点把链表断成二截,然后跟目标点重新接起来即可. <!doctype html> <html> <head> <t

  • js交换排序 冒泡排序算法（Javascript版）

    比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素重复以上的步骤,除了最后一个. 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较. function sort(elements){ for(var i=0;i<elements.length-1;i++){ for(var j=0;j<elements.length-i-1;j++){ if(elemen

  • js 排序动画模拟 冒泡排序

    而在某些场景中,队列确实像一支奇兵,可以带来不错的效果,比如配合定时器使用,可以模拟时间差效果 复制代码 代码如下: 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

  • JS排序算法之冒泡排序，选择排序与插入排序实例分析

    本文实例讲述了JS排序算法之冒泡排序,选择排序与插入排序.分享给大家供大家参考,具体如下: 冒泡排序: 对数组的中的数据,依次比较相邻两数的大小. 如果前面的数据大于后面的数据,就交换这两个数. 时间复杂度O(n^2) function bubble(array){ var temp; for(var i=0; i<arr.length; i++){ for(var j=0; j<arr.length; j++){ if(arr[j]>arr[j+1]){ temp = arr[j+1]

  • js排序与重组的实例讲解

    js排序与重组的实例讲解

    前几天同学发给我一个问题,思路想整理一下,也供大家参考.实际上这道题本质就是考察的是去重与排序的问题.好了闲话少说,上题. function input(req){ if(req<=100){ var arr=[],arr1=[]; for(var i=0;i<req;i++){ var num=parseInt(Math.random()*(1000-1)+1); arr.push(num); if(arr1.indexOf(arr[i])==-1) arr1.push(arr[i]); }

  • js实现div模拟模态对话框展现URL内容

    本文实例讲述了js实现div模拟模态对话框展现URL内容.分享给大家供大家参考,具体如下: <script> function sAlert(str){ var msgw,msgh,bordercolor; msgw=800;//提示窗口的宽度 msgh=600;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor="#336699";//提示窗口的边框颜色 titlecolor="#99CCFF";//提示窗口

  • 经典排序算法之冒泡排序(Bubble sort)代码

    经典排序算法之冒泡排序(Bubble sort)代码

    经典排序算法 - 冒泡排序Bubble sort 原理是临近的数字两两进行比较,按照从小到大或者从大到小的顺序进行交换, 这样一趟过去后,最大或最小的数字被交换到了最后一位, 然后再从头开始进行两两比较交换,直到倒数第二位时结束,其余类似看例子 例子为从小到大排序, 原始待排序数组| 6 | 2 | 4 | 1 | 5 | 9 | 第一趟排序(外循环) 第一次两两比较6 > 2交换(内循环) 交换前状态| 6 | 2 | 4 | 1 | 5 | 9 | 交换后状态| 2 | 6 | 4 | 1

  • JS排序算法之希尔排序与快速排序实现方法

    本文实例讲述了JS排序算法之希尔排序与快速排序实现方法.分享给大家供大家参考,具体如下: 希尔排序: 定义一个间隔序列,例如是5,3,1.第一次处理,会处理所有间隔为5的,下一次会处理间隔为3的,最后一次处理间隔为1的元素.也就是相邻元素执行标准插入排序. 在开始最后一次处理时,大部分元素都将在正确的位置,算法就不必对很多元素进行交换,这是比插入元素高级的地方. 时间复杂度O(n*logn) function shellSort(){ var N=arr.length; var h=1; whi

  • PHP排序算法之冒泡排序(Bubble Sort)实现方法详解

    本文实例讲述了PHP排序算法之冒泡排序(Bubble Sort)实现方法.分享给大家供大家参考,具体如下: 基本思想: 冒泡排序是一种交换排序,它的基本思想是:两两比较相邻记录的关键字,如果反序则交换,直到没有反序的记录为止. 最简单排序实现: 我们先来看看在没有学习各种排序方法前经常使用的排序方法(至少我是这样....): //这里使用了类型提示(type hint) array,不熟悉或者不习惯的同学大可去掉,不影响运算结果 function MySort(array &$arr){ $le

  • js+CSS实现模拟华丽的select控件下拉菜单效果

    js+CSS实现模拟华丽的select控件下拉菜单效果

    本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:

  • js运动动画的八个知识点

    今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ 复制代码 代码如下: oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是: a.offsetLeft和left的相同之处都是表示子节点相对于父

随机推荐