JS Code that records the mouse trajectory and plays back

Problems:
Question
①: In the mousemove event, many left and top records are recorded in the moving method. I only need a few groups of data and do not need that much;
Question
②: During playback, the execution in the for loop is too fast. The result is that you can directly see the start and end positions. I want to slow down the process. I created a delay function, but there is still no substantive solution.

Slowly drag the small square to a new position, and then release the mouse,

Click "reset", and then click "playback" to view the path,
Only one chance--|
Latency in a loopCode: Copy codeThe Code is as follows: // The latency Method
Sleep: function (n ){
VaR start = new date (). gettime ();
While (true)
If (new date (). gettime ()-Start> N)
Break;
},
// Playback track record
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;
// Method of delay Loop
This. Sleep (10 );
}
}

Still not achieving the effect of Slow playback, to be solved...
Aha, solved this morning ~!
The for loop is not used. The timer uses the subscript of the array to continuously change the left and top of the small square.

Timer combined with array subscript Copy code The Code is as follows: // The latency Method
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 is the array subscript.
Oslippage. style. Top = This. Y [This. inum]-This. relativey;
Mousetrackrecord. inum ++;
// If the subscript exceeds its length, the playback is stopped.
If (this. inum> This. X. Length-1 ){
Clearinterval (this. timeid );
}
},
// Playback track record
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;
//// Method of delayed Loop
// This. Sleep (10 );
//}
This. timeid = setinterval ("mousetrackrecord. Sleep ()", 10 );
}

demo effect: <p> <input id = "button1" onclick = "mousetrackrecord. overtrack (); "value =" reset "type =" button "> <input id =" button2 "onclick =" mousetrackrecord. backtrack (); "value =" playback "type =" button "> <input id =" button3 "onclick =" mousetrackrecord. init (); "value =" "" type = "button">
[Ctrl + A select all Note: To introduce external JS, refresh it before execution]