为什么我的变量一直显示为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？

回答

相关问题