10秒間に500ミリ秒ごとにマウスの位置を追跡する方法はありますか？

Question

10秒間500ミリ秒ごとにマウスポインタの位置を捕捉して、想定したいと思います。助けてもらえますか？

私は 'mousemove'イベントを使用しようとしましたが、この方法ではこれ以上移動できませんでした。ここにコードがあります。 mousemoveのremoveEventListnerが正しく動作していません。

\t var loadTime; 
 
\t var loadDate; 
 
\t var clickTime; 
 
\t var mousePositions = []; 
 
\t var closeCapture = false; 
 
\t var isTimerON = false; 
 
\t var timer_div = document.getElementById('timer-section'); 
 
\t var x , y; 
 
\t function mouseUpdate(e) { 
 
\t \t if (isTimerON) { 
 
\t \t \t x = e.pageX; 
 
\t \t \t y = e.pageY; 
 

 
\t \t // if the timer is ON and position capturing is OPEN then push 
 
\t \t // the last pointer position to the array 
 
\t \t \t if (!closeCapture){ 
 
\t \t \t \t var mouseUpdate = setInterval(function() { 
 
\t \t \t \t \t mousePositions.push({ 
 
\t \t \t \t \t \t pos_x : x, 
 
\t \t \t \t \t \t pos_y : y 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t 
 
\t \t \t \t }, 500); 
 
\t \t \t } 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t document.removeEventListener('mousemove', mouseUpdate); 
 
\t \t } 
 
\t } 
 

 
\t function setTimer (time) { 
 

 
\t \t var x = time; 
 
\t \t document.addEventListener('mousemove', mouseUpdate); 
 

 
\t \t if (isTimerON) { 
 
\t \t \t var timer = setInterval(function() { 
 
\t \t \t \t if (x >= 0){ 
 
\t \t \t \t \t timer_div.innerHTML = x; 
 
\t \t \t \t \t console.log(x); 
 

 
\t \t \t \t \t x--; 
 
\t \t \t \t } 
 
\t \t \t \t else { 
 
\t \t \t \t \t //console.log(mousePositions); 
 
\t \t \t \t \t isTimerON = false; 
 
\t \t \t \t \t closeCapture = true; 
 
\t \t \t \t \t clearInterval(timer); 
 
\t \t \t \t \t console.log("timer off capture closed"); 
 
\t \t \t \t \t 
 
\t \t \t \t } 
 
\t \t \t 
 
\t \t \t },1000); 
 
\t \t } 
 
\t } 
 

 
\t function makeTime(x) { 
 
\t \t return x.getHours() + " : " + x.getMinutes() + " : " + x.getSeconds(); 
 
\t } 
 

 
\t function tii() { 
 
\t \t isTimerON = true; 
 
\t \t setTimer(10); 
 
\t \t document.removeEventListener('click', tii); 
 
\t } 
 

 
\t document.addEventListener('DOMContentLoaded', function() { 
 
\t \t loadCDate = new Date(); 
 
\t \t loadTime = makeTime(loadCDate); 
 
\t \t console.log(loadTime); 
 
\t \t document.addEventListener('click', tii); 
 
\t });

<div id="timer-section"></div>

Answer 1

あなたの制限時間（この例ではlimitを10秒に設定しています）の間、mousemoveイベントをキャプチャすることをお勧めします。 throttle変数は、その数ミリ秒（この例では500ミリ秒）に1回のみキャプチャすることを保証します。

mousemoveイベントのx/y座標を使用すると、マウスの現在の位置を取得できます。

var limit = 10000; 
var throttle = 500; 
var start = (new Date).getTime(); 
var last = (new Date).getTime(); 

document.addEventListener('mousemove', mouseUpdate); 

function mouseUpdate(event) { 
    var now = (new Date).getTime(); 
    if (now - start > limit) { 
    return document.removeEventListener('mousemove', mouseUpdate); 
    } 

    if (now - last < throttle) { 
    return; 
    } 

    last = now; 

    // do whatever you want to do within your time limit here 
} 

Answer 2

私はあなたがこのhttp://devdocs.io/lodash~4/index#throttleが必要だと思います。スロットル機能は、セットアップ周波数でイベントをキャプチャさせます。コードでは、マウスイベントのすべてのコールバックを処理します。あなたはプログラムがフリーズします。