@H_4040@之前在知乎看到有人在问 自己写了一个冒泡排序算法如何用HTML,CSS,JavaScript展现出来排序过程。 感觉这个问题还挺有意思 。前些时间就来写了一个。这里记录一下实现过程。
@H4040@基本的思想是把排序每一步的时候每个数据的值用DOM结构表达出来。
@H4040@
问题一:如何将JavaScript排序的一步步进程展现出来?
@H4040@
我试过的几种思路:
@H4040@<span style="background-color: #ccffcc">
1.让JavaScript暂停下来,慢下来。
@H404_0@JavaScript排序是很快的,要我们肉眼能看到它的实现过程,我首先想到的是让排序慢下来。 排序的每一个循环都让它停300ms然后再继续进行。 怎么样才能停下来呢。查了一下JavaScript貌似没有sleep()这样的函数。暂停做不到,但是可以想办法让实现跟暂停差不多的效果。比如在循环里做一些无关的事情 。
@H_404_0@首先尝试了让while(true)来一直执行一个空操作。执行一段时间再回到排序逻辑。代码大致是这样:
<div class="jb51code">
<pre class="brush:js;">
for (var i = 0; i < 3; i++) {
document.writeln(i); //DOM操作
var now = new Date().getTime();
while(new Date().getTime() - now < 3000){}
}