記錄滑鼠的軌跡並回放的js代碼_javascript技巧

遇到的問題：
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> <div id="map"> <div id="slippage" onmouseup="MOUSETRACKRECORD.mouseUp();" onmousemove="MOUSETRACKRECORD.mouseMove();" onmousedown="MOUSETRACKRECORD.mouseDown();"></div></div><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需重新整理才能執行]