爲什麼我的變量一直顯示爲NaN？

因此試圖製作一個小腳本來跟蹤鼠標移動。我想計算鼠標不移動的平均速度和平均持續時間。爲什麼我的變量一直顯示爲NaN？

但是，當我將它們打印出來時，我的變量在控制檯中顯示爲NaN。

var avgSize = 0; 
 
var avgSpeed = 0; 
 
var measures = 0; 
 
var lastX; 
 
var lastY; 
 
var lastMillis; 
 

 
var eventDoc, doc, body, pageX, pageY; 
 
var c = document.getElementById("canvas"); 
 
var ctx = c.getContext("2d"); 
 

 
// Mouse moved 
 
document.onmousemove = function(event) { 
 
    event = event || window.event; // IE-ism 
 

 
    // If pageX/Y aren't available but clientX/Y are, calculate pageX/Y - logic taken from jQuery 
 
    if (event.pageX == null && event.clientX != null) { 
 
     eventDoc = (event.target && event.target.ownerDocument) || document; 
 
     doc = eventDoc.documentElement; 
 
     body = eventDoc.body; 
 

 
     event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); 
 
     event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); 
 
    } 
 

 
    // Calculate dot size 
 
    dotSize = (Date.now() - lastMillis)/50; 
 
    if (dotSize > window.innerHeight/10) { 
 
     dotSize = window.innerHeight/10; 
 
    } 
 

 
    // Draw dots 
 
    if (dotSize > 2) { 
 
     ctx.beginPath(); 
 
     ctx.arc(lastX, lastY, dotSize, 0, 2 * Math.PI); 
 
     ctx.stroke(); 
 
     ctx.fill(); 
 
    } 
 

 
    measure(Math.abs(event.pageX - lastX) + Math.abs(event.pageY - lastY), dotSize); 
 

 
    // Variables for comparison 
 
    lastX = event.pageX; 
 
    lastY = event.pageY; 
 
    lastMillis = Date.now(); 
 
} 
 

 
// Calculate averages 
 
function measure(speed, size) { 
 
    measures++; 
 
    avgSpeed = avgSpeed - (avgSpeed/measures) + speed/measures; 
 
    avgSize = avgSize - (avgSize/measures) + size/measures; 
 

 
    console.log("average speed: " + avgSpeed + " average size: " + avgSize); 
 
}

<canvas id="canvas"></canvas>

編輯：新增失蹤聲明我不小心刪除。

來源

2017-06-12 Hans Chnuspi

你有沒有試過用調試器通過？它應該指出出錯的地方 – Huangism

在開始時初始化'lastMillis'，因爲它使用'undefined'。（它的'undefined'值影響其他變量）。 –

我更新了問題，我不小心刪除了這一行（謝謝指出）。它仍然無法正常工作。 –

以下變量在第一次使用時未在您的mousemove處理程序中定義。你應該在第一步之前/期間定義這些。

lastX = event.pageX; 
lastY = event.pageY; 
lastMillis = Date.now();

編輯：原代碼已經有這麼在這裏失去了代碼更新是一個新的答案

你的變數仍然不確定，所以我建議將它們定義第一招：

// Mouse moved 
document.onmousemove = function(event) { 
    event = event || window.event; // IE-ism 

    if (typeof lastX == "undefined") { 
     lastX = event.pageX; 
    } 

    if (typeof lastY == "undefined") { 
     lastY = event.pageY; 
    } 

    if (typeof lastMillis == "undefined") { 
     lastMillis = Date.now(); 
    } 

    ...

來源

2017-06-12 14:12:35

@HansChnuspi實際上，這是錯誤，因爲'Math.abs（event.pageX - undefined）+ Math.abs（event.pageY - undefined）'給你'NaN'。 – JDB

這實際上是錯誤，我現在不知道javascript是如何工作的。非常感謝！ –

@JDB謝謝你的解釋！ –

爲什麼我的變量一直顯示爲NaN？

回答

相關問題