JavaScript排序算法动画演示效果的实现方法排序算法动画演示效果的实现方法
之前在知乎看到有人在问 自己写了一个冒泡排序算法如何用HTML，CSS,JavaScript展现出来排序过程。 感觉这个问题还挺
有意思 。前些时间就来写了一个。这里记录一下实现过程。
基本的思想是把排序每一步的时候每个数据的值用DOM结构表达出来。
问题一：如何将问题一：如何将JavaScript排序的一步步进程展现出来排序的一步步进程展现出来?
我试过的几种思路：我试过的几种思路：
1.让让JavaScript暂停下来，慢下来。暂停下来，慢下来。
JavaScript排序是很快的，要我们肉眼能看到它的实现过程，我首先想到的是让排序慢下来。 排序的每一个循环都让它停
300ms然后再继续进行。 怎么样才能停下来呢。查了一下JavaScript貌似没有sleep()这样的函数。暂停做不到，但是可以想办
法让实现跟暂停差不多的效果。比如在循环里做一些无关的事情 。
首先尝试了让while(true)来一直执行一个空操作。执行一段时间再回到排序逻辑。代码大致是这样：
for (var i = 0; i < 3; i++) {
document.writeln(i); //DOM操作
var now = new Date().getTime();
while(new Date().getTime() - now < 3000){}
}
慢是慢下来了。不过太耗资源，排序进行过程中dom并不会有任何改变，直到排序结束， DOM会变成排序好之后的样子。
但是如果设置断点一步步执行的时候 又可以看到一步步的排序变化。估计是因为这个操作太耗资源导致浏览器下达了一个
DOM操作的命令但是一直腾不出资源来进行DOM操作。所以真正DOM操作的时候在js代码执行结束之后。
所以让JavaScript排序慢来来还是没有实现。
另一种让另一种让JavaScript暂停下来的思路：暂停下来的思路：
写这个文章的时候又想到一种方法来让JavaScript停下来。 那就是AJAX的同步请求，以及超时操作。 也就是在要停下来的地
方放一个AJAX请求，同步请求， 然后设置超时。超时的时间就是我们要暂停的时间。为了避免在到达超时请求之前服务 器就
返回了我们的AJAX请求。可以在服务端运行类似 sleep()的程序 。从而保证AJAX不会返回。直接超时然后返回到我们的循
环。不过这只是个设想。有兴趣的可以去尝试一下。
2.闭包和定时器。闭包和定时器。 这种思路不需要让排序过程慢下来。而是使用闭包缓存排序过程中数组的变化。然后使用setTimeout来确定
展示每一个数组状态的顺序。在排序循环中放入类似下面的代码。
(function(){
var theArr = arr.slice();//当前数组状态的备份
setTimeout(function(){
bubbleSortDom(theArr);//排序的DOM操作。
},500*timeCount);
timeCount++;//定时器的顺序。
})();
不过后来发现这样子写的话代码量会比较大，逻辑有修改的话要修改的地方会有点多。局限性很多，比如要实现排序动画加快
或减慢操作几乎是很困难的。所以还要另想办法。
3.缓存排序中的数组状态。缓存排序中的数组状态。
也就是在排序过程中。将数组的每一轮循环的状态保存到一个数组。然后再用这个数组依次将排序状态保存下来。 只需要在
排序中加入一句就行。
this.pushHis(arr.slice(),i-1,j,k,temp);
这样就只需要一个setInterval()就可以了。并且可以很方便的实现动画的加快与减慢。逻辑也比较好理解 。
问题二：如何实现问题二：如何实现JavaScript排序动画的加快与减慢。排序动画的加快与减慢。
我们问题一使用的第三种方法。 得到一个保存了每一步排序状态的数组arr。 然后我们可以使用一个setInterval()定时器一步
步展现排序状态。 如果要加快速度或减慢速度。就clearInterval()，修改定时器的执行间隔，重新setInterval()，从前一个定时
器执行到数组中的位置开始执行。
问题三：对于使用递归实现的数组怎么办？问题三：对于使用递归实现的数组怎么办？ 不是在原数组上进行操作的怎么办？不是在原数组上进行操作的怎么办？
使用递归实现的排序。 可能并没有在一个数组上进行操作，只是最后返回一个排序好的数组出来。那么我们要如何获得排序
中的数组的完整状态呢。
资源评论
