求助js程序中延时效果实现。

一般程序经常用setTimeout或者setInterval来实现延时或者间隔执行，平常也经常用。最近编一个js的汉诺塔却遇到了问题，各种百度都没有找到解决方法，不加延时程序，则程序执行太快，点开始就看到结束了看不到中间过程动画。用了网上一些方法要么程序终止执行，要么确实等待了但是画面没有更新，还是显示最后一步的效果。
只好来这里麻烦各位帮想想办法。
程序源码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>递归案例</title>
<style>
.hnt{
width:300px;
height:120px;
background:#9FF;
border:#30F thin dotted;
text-align:center;
float:left;
}
</style>
<script type="text/javascript">
var level=5;//层数
var delay=500;//延迟
var data=["1","222","33333","4444444","555555555"];
var a=new Array(5),b=new Array(5),c=new Array(5);
function init()
{
for(var i=0;i<data.length;i++)//小数在上，大数在下
{
a[level-1-i]=data[i];
b[i]="";
c[i]="";
}
viewHnt();
hnt(level,a,b,c);
}
function hnt(n,A,B,C)//移动n从哪里，经过哪里，到达哪里.n为柱子数组的有效长度
{
if(n==1){
move(A,C);
}
else{
hnt(n-1,A,C,B);//把n-1个盘子先移动到passP
move(A,C);
hnt(n-1,B,A,C);
}
}
function move(start,end)
{
var h1=getHeight(start);
var h2=getHeight(end);
end[h2]=start[h1-1];
start[h1-1]="";
viewHnt();

}
function getHeight(sz)
{
var h=0;
for(var i=0;i<level;i++)
{
if(sz[i]!="")h++;
}
return h;
}
function viewHnt()
{
var diva=document.getElementById("A");
var divb=document.getElementById("B");
var divc=document.getElementById("C");
var bottom="===========";
var stra="",strb="",strc="";
for(var i=0;i<level;i++)
{
var v=a[i]==""?"|":a[i];
stra=v+"<br/>"+stra;
var v1=b[i]==""?"|":b[i];
strb=v1+"<br/>"+strb;
var v2=c[i]==""?"|":c[i];
strc=v2+"<br/>"+strc;
}
diva.innerHTML=stra+bottom;
divb.innerHTML=strb+bottom;
divc.innerHTML=strc+bottom;
}
function delay(ms)//程序会中断
{
var t=Date.now();
while(Date.now()-t<=ms);
}
function sleep(ms)//UI会卡住，直到运行完才显示。
{
var begin = new Date();
var exitTime = begin.setMilliseconds(begin.getMilliseconds()+ms);
var str="";
while (true) {
now = new Date();
if (now > exitTime)
return;
}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p> <input type="button" name="button" id="button" value="开始汉诺塔" onclick="init()"/>
</p>
<div id="A" class="hnt"></div>
<div id="B" class="hnt"></div>
<div id="C" class="hnt"></div>

</form>
</body>
</html>