JavaScript排序算法动画演示效果的实现方法

看到知乎里有人问自己怎么用HTML、CSS、JavaScript展示排序过程。我觉得这个问题挺有意思的。前段时间我来写一篇。在此记录实施过程。

基本思想是在对每一步进行排序时，表达DOM结构中每个数据的值。

问题1:如何展示JavaScript排序的分步过程？

我尝试过几个想法：

1.让JavaScript暂停并放慢速度。

JavaScript排序非常快。如果能肉眼看到它的实现，我首先想到的是减缓排序。在继续之前，让它在每个分拣循环中停止300毫秒。怎么才能停下来？检查完JavaScript，好像没有像sleep()这样的功能。暂停做不到，但可以想办法达到和暂停一样的效果。例如，在循环中做一些不相关的事情。

首先，我试图使while(true)总是执行空操作。执行一会儿，然后返回到排序逻辑。代码是这样的：

for(var I=0；I 3；I){ document . writeln(I)；//DOM操作var now=new Date()。getTime()；While (newdate()。gettime ()-now3000) {}}正在减速。但是太耗费资源，在排序的过程中dom不会改变，直到排序完成，排序后DOM才会变成原来的样子。但是如果你设置断点并一步一步地执行它们，你可以看到顺序一步一步地变化。估计这个操作消耗了太多的资源，导致浏览器给出了一个进行DOM操作的命令，却始终没能为DOM操作腾出资源。因此，真正的DOM操作是在js代码执行之后。因此，还没有实现减缓JavaScript排序。

暂停JavaScript的另一种方法是：

当我写这篇文章时，我想到了一个阻止JavaScript的方法。那就是AJAX的同步请求和超时操作。也就是说，将一个AJAX请求放在您想要停止的地方，同步该请求，然后设置一个超时。超时是我们必须暂停的时间。防止服务器在到达超时请求之前返回我们的AJAX请求。您可以在服务器上运行像sleep()这样的程序。从而确保AJAX不会返回。暂停一下，回到我们的循环。但这只是一个想法。如果你感兴趣，你可以试一试。

2.关闭和计时器。这种思维不需要减缓排序过程。相反，闭包用于在排序过程中缓存数组更改。然后使用setTimeout确定每个数组状态的显示顺序。在排序循环中放入如下内容。

(function(){ var ArEr=arr . slice()；//当前数组状态的backup settimeout(function(){ bubble sort DOM(the arr)；//排序的DOM操作。}，500 * time count)；时间计数；//定时器序列。})();但是后来发现这样写代码量会比较大，如果修改逻辑会多一点修改的地方。有很多限制，例如，排序动画的操作几乎很难加快或减慢。所以我们必须找到另一种方法。

3.排序中的缓存数组状态。

也就是在分拣过程中。将数组中每个循环的状态保存到数组中。然后用这个数组依次保存排序状态。只需在排序中添加一句话。

this . PuSH(arr . slice()，i-1，j，k，temp)；这样，只需要一个setInterval()。并且动画可以方便地加速和减速。逻辑也很容易理解。

问题2:如何加快和减慢JavaScript排序动画。

我们在问题一中使用的第三种方法。获取一个数组arr，保存每个步骤的排序状态。然后我们可以使用一个setInterval()计时器来一步一步地显示排序状态。如果你想加速或减速。关于clearInterval()，修改定时器的执行间隔，重置间隔()，并开始从前一个定时器执行到数组中的位置。

问题3:递归实现的数组怎么样？如果不对原始数组进行操作呢？

使用递归进行排序。可能不对数组进行操作，但最终会返回一个已排序的数组。那么我们如何在排序中获得数组的完整状态呢？

比如快速排序。

我一开始没有考虑动画，我的实现是这样的：

函数quick sort(arr){ var len=arr . length，leftArr=[]，rightArr=[]，tagif(len 2){ return arr；}标记=arr[0]；for(I=1；伊琳；I){ if(arr[I]=tag){ left arr . push(arr[I])} else { right arr . push(arr[I])；} }返回快速排序(leftArr)。concat(标记，快速排序(right arr))；}然后为了考虑动画，我重写了它的逻辑，在同一个数组上实现。事实上，原始数组中当前子数组的起始位置是在递归过程中传入的。从而对原始阵列进行操作。

该模式有两种实现方法。排序逻辑略有不同。

首先是和距离比较。如果你遇到比你小的人，把他们放在你面前。第一个循环。较大的一个放在当前排序子数组的后面，循环序号保持不变。直到安排完成。这种方法的缺点是它甚至是一个有序数组。它将被重新安排。

第二种方法是在标记位之外设置一个比较位。如果遇到比自己小的东西，放在前面，标记位的位置为1，标记位和对比位之间的所有位置向后移动一个位置。遇到比自己大的人。标志位保持不变，对比度位为1。这种方法的缺点是对数组的操作太多。优点是有序数组不会被重新排列。

方法1:

函数quickSort(arr，a，b，qArr){var len=arr.length，leftArr=[]，rightArr=[]，tag，I，k，len_l，len_r，lb，ra，tempif(a==undefined b==undefined){ a=0；b=arr . length-1；//初始化起始位置。} if(qArr==undefined){ qArr=arr . slice()；} if((len==2 arr[0]==arr[1])| | len 2){ return arr；}标记=QaRR[a]；for(I=1；我透镜；){ if(QaRR[a I]=tag){ left arr . push(QaRR[a I])；qArr[a I-1]=qArr[a I]；qArr[a i]=标记；k=a I；我；} else { if(left arr . length right arr . length==len-1){ break；} temp=QaRR[a I]；qArr[a I]=qArr[B- right arr . length]；qArr[B- right arr . length]=temp；right arr . push(temp)；k=a I-1；}this.pushHis(qArr.slice()、a、b、k)；} len _ l=leftArr.lengthlen _ r=right arr . length；if(len _ l==0){ lb=a；} else { lb=a len _ l-1；this.sort(leftArr，a，lb，qArr)；} if(len _ r==0){ ra=b；} else { ra=B1-len _ r；这个。sort (rightarr，ra，b，qarr)} return qarr}方法2:

函数quickSort2(arr，a，b，qArr){ var len=arr.length，leftArr=[]，rightArr=[]，tag，I，j，k，temp，len_l，len_r，lb，ra；if(a==undefined b==undefined){ a=0；b=arr . length-1；//初始化起始位置。} if(qArr==undefined){ qArr=arr . slice()；} if(len 2){ return arr；} if(len==2 arr[0]==arr[1]){ return arr；}标记=QaRR[a]；对于(i=1，k=0；我透镜；){ if(QaRR[a I]=tag){ right arr . push(QaRR[a I])；我；} else { temp=QaRR[a I]；for(j=a I；ja k；j-){ QaRR[j]=QaRR[j-1]；//this.pushHis(qArr.slice()、a、b、a、k)；} qArr[a k]=temp；left arr . push(temp)；k；我；} this.pushHis(qArr.slice()，a，b，a k，I-1)；} len _ l=leftArr.lengthlen _ r=right arr . length；if(len _ l==0){ lb=a；} else { lb=a len _ l-1；this.sort(leftArr，a，lb，qArr)；} if(len _ r==0){ ra=b；} else { ra=B1-len _ r；this.sort(rightArr，ra，b，qArr) }返回qArr；}下面会有动画演示具体区别。

问题4:动画流畅。

排序动画的DOM操作非常快。我在这里做的优化是让每个排序步骤只涉及一个DOM操作。全部用JavaScript拼接，替换一次。类似于下面的代码。

渲染：

主要实现了：

冒泡排序JavaScript动画显示插入排序JavaScript动画显示选择排序JavaScript动画显示快速排序JavaScript动画显示合并排序JavaScript动画显示希尔排序JavaScript动画显示

以上就是边肖带来的JavaScript排序算法动画演示效果的实现方法的全部内容。希望大家多多支持我们~