记录鼠标的轨迹并回放的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);
}

演示效果：

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

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