用Javascript重播鼠標移動

Question

我最近問了一個關於鼠標RECORDING的問題。現在我需要弄清楚如何重播它。

最近的問題：https://stackoverflow.com/questions/8129723/record-mouse-movement-with-javascript

我將用PHP，使當前頁面的相同副本，然後我將插入重播腳本它。該腳本會根據時間（爲了說明鼠標移動），根據多個x和y座標添加並移動一個絕對的posisioned圖像。

有沒有什麼好的方法（更好，然後下）重播多個mousemovements？

<input style="width:100%" type="text" name="onlyforstackoverflow1" value="0" size="4"><br> 
<input style="width:100%" type="text" name="onlyforstackoverflow2" value="0" size="4"> 



<script> 

// I want this (a very long array with x-cordinates, y-cordinates and time from pageload) 

var very_long_array = [1,2,1000,2,22,2000,3,33,3645,4,44,3456]; 

// To become the same as this 

setTimeout("document.Show.onlyforstackoverflow1.value = 1;document.Show.onlyforstackoverflow2.value = 11;",100) 
setTimeout("document.Show.onlyforstackoverflow1.value = 2;document.Show.onlyforstackoverflow2.value = 22;",200) 
setTimeout("document.Show.onlyforstackoverflow1.value = 3;document.Show.onlyforstackoverflow2.value = 33;",364) 
setTimeout("document.Show.onlyforstackoverflow1.value = 4;document.Show.onlyforstackoverflow2.value = 44;",453) 


// in the real script it will be moving around an image instead... 

</script> 

Answer 1

var dataList = [ 1, 2, 1000, 2, 22, 2000 ], // the long big array 
    preTime = 0; 

function run() { 
    var parts = dataList.splice(0, 3), // after splice, dataList will be auto updated 
     nowTime; 

    if (parts.length == 3) { 
     nowTime = parts[ 2 ]; 

     setTimeout(function() { 
      replay(parts[ 0 ], parts[ 1 ]); // x = parts[ 0 ], y = parts[ 1 ] 

      preTime = nowTime; 
      // continue run next replay 
      run(); 
     }, nowTime - preTime); 
    } 
} 

function replay(x, y) { 
    // do something with x, y; 
    // document.Show.onlyforstackoverflow1.value = x; 
    // document.Show.onlyforstackoverflow2.value = y; 
} 

// start 
run(); 

只需使用setTimeout的做任務，你不必每一項任務寫成:-)