记录鼠标的轨迹并回放的js代码

遇到的问题：
Question
①：mousemove事件中，移动方法中会被记录很多的left和top，我只需要大概的几组数据就行，不需要那么多；
Question
②：回放的时候，在for循环里执行太快了，导致的效果就是直接看到开始跟结束位置，我想放慢中间的过程；搞了一个延迟的函数，但是还是没有实质性解决。

慢慢慢慢拖动小方块到一个新位置，然后松开鼠标，

先点击“复位”，再点击“回放”查看所经过的路径，
只有一次机会哦 - -|||
循环内延迟的部分代码：
代码如下:

//延迟方法 
sleep: function(n) { 
var start = new Date().getTime(); 
while (true) 
if (new Date().getTime() - start > n) 
break; 
}, 
//回看轨迹记录 
backTrack: function() { 
var oSlippage = document.getElementById("slippage"); 
var len = this.X.length; 
for (var i = 0; i < len; i++) { 
oSlippage.style.left = this.X[i] - this.relativeX; 
oSlippage.style.top = this.Y[i] - this.relativeY; 
//延迟循环方法 
this.sleep(10); 
} 
} 
 
还是没有达到慢慢回放的效果，待解决。。。 
啊哈，今早解决了~！ 
不用for循环，通过定时器运用数组的下标来不断改变小方块的left和top 

定时器结合数组下标 
 代码如下:

//延迟方法 
sleep: function(n) { 
//var start = new Date().getTime(); 
//while (true) 
// if (new Date().getTime() - start > n) 
// break; 
var oSlippage = document.getElementById("slippage"); 
oSlippage.style.left = this.X[this.iNum] - this.relativeX; //iNum为数组下标 
oSlippage.style.top = this.Y[this.iNum] - this.relativeY; 
MOUSETRACKRECORD.iNum++; 
//如果下标大于了他的长度就停止回放 
if (this.iNum > this.X.length - 1) { 
clearInterval(this.timeID); 
} 
}, 
//回看轨迹记录 
backTrack: function() { 
//var oSlippage = document.getElementById("slippage"); 
//var len = this.X.length; 
//for (var i = 0; i < len; i++) { 
// oSlippage.style.left = this.X[i] - this.relativeX; 
// oSlippage.style.top = this.Y[i] - this.relativeY; 
// //延迟循环方法 
// this.sleep(10); 
//} 
this.timeID = setInterval("MOUSETRACKRECORD.sleep()", 10); 
} 

演示效果：
<script type="text/javascript"> 
MOUSETRACKRECORD = { 
oSlippage: null, //小方块 
X: [], //X坐标 
Y: [], //Y坐标 
clickX: 0, //鼠标点击时的X坐标 
clickY: 0, //鼠标点击时的Y坐标 
relativeX: 0, //鼠标相对方块的X坐标 
relativeY: 0, //鼠标相对方块的Y坐标 
isCanMove: false, //是否可以移动 
iNum: 0, //坐标XY数组的下标 
timeID: null, //回放定时器 
//鼠标按下的时候 
mouseDown: function() { 
//鼠标点击时 
this.clickX = event.clientX; 
this.clickY = event.clientY; 
//获取小方块 
var oSlippage = document.getElementById("slippage"); 
//获取div当前坐标(左边界和上边界) 
var divX = parseInt(oSlippage.style.left) || 0; 
var divY = parseInt(oSlippage.style.top) || 0; 
//获取鼠标相对div的坐标 
this.relativeX = this.clickX - divX; 
this.relativeY = this.clickY - divY; 
//设置可以移动 
this.isCanMove = true; 
}, 
//鼠标移动的时候 
mouseMove: function() { 
if (this.isCanMove) { 
var oSlippage = document.getElementById("slippage"); 
oSlippage.style.left = event.clientX - this.relativeX; 
oSlippage.style.top = event.clientY - this.relativeY; 
//移动就记录下鼠标的轨迹 
MOUSETRACKRECORD.startRecord(event.clientX, event.clientY); 
} 
}, 
//鼠标松开的时候 
mouseUp: function() { 
//取消小方块的mousemove事件 
var oSlippage = document.getElementById("slippage"); 
oSlippage.onmousemove = null; 
this.isCanMove = false; 
//停止记录 
clearInterval(this.timeID); 
}, 
//开始记录鼠标移动过的坐标 
startRecord: function(x, y) { 
this.X.push(x); 
this.Y.push(y); 
}, 
//点击停止按钮，回到初始状态 
overTrack: function() { 
var oSlippage = document.getElementById("slippage"); 
oSlippage.style.left = 50; 
oSlippage.style.top = 50; 
}, 
//延迟方法 
sleep: function(n) { 
//var start = new Date().getTime(); 
//while (true) 
// if (new Date().getTime() - start > n) 
// break; 
var oSlippage = document.getElementById("slippage"); 
oSlippage.style.left = this.X[this.iNum] - this.relativeX; 
oSlippage.style.top = this.Y[this.iNum] - this.relativeY; 
MOUSETRACKRECORD.iNum++; 
//如果下标大于了他的长度就停止回放 
if (this.iNum > this.X.length - 1) { 
clearInterval(this.timeID); 
} 
}, 
//回看轨迹记录 
backTrack: function() { 
//var oSlippage = document.getElementById("slippage"); 
//var len = this.X.length; 
//for (var i = 0; i < len; i++) { 
// oSlippage.style.left = this.X[i] - this.relativeX; 
// oSlippage.style.top = this.Y[i] - this.relativeY; 
// //延迟循环方法 
// this.sleep(10); 
//} 
this.timeID = setInterval("MOUSETRACKRECORD.sleep()", 10); 
}, 
//初始化 
init: function() { 
location.reload(); 
} 
} 
</script> 
 
<input id="Button1" onclick="MOUSETRACKRECORD.overTrack();" value="复位" type="button"> <input id="Button2" onclick="MOUSETRACKRECORD.backTrack();" value="回放" type="button"> <input id="Button3" onclick="MOUSETRACKRECORD.init();" value="再来一次" type="button"> 

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