JavaScript setTimeout() 无法自行触发

Question

由另一个函数触发的函数如何获取鼠标的位置？这是我的代码：

function myFunction(e){
    setTimeout(function(){
        if(isMouseDown == true){
            mouseX = e.clientX;
            mouseY = e.clientY;
            document.getElementById('myElement').innerHTML = mouseX + ' , ' + mouseY;
            myFunction(event);
        } else {}
    }, 100);
}

它的作用是在点击时显示坐标。如果isMouseDown == true，我需要它每 100 毫秒显示一次。

谢谢

Answer 1

您想要实现的目标有点模糊，但是如果您使用setTimeout()，您将不会收到定期事件。听起来您正在寻找setInterval()。请看下面的例子：

  var mouseX = 0;
  var mouseY = 0;
  var isMouseDown = true;
  document.onmousemove = function(e){
    mouseX = e.pageX;
    mouseY = e.pageY;
  }
  setInterval("myFunction()", 100);
    
  function myFunction(){
    if(isMouseDown) { 
       document.getElementById('myElement').innerHTML = mouseX + ' , ' + mouseY;
    }
  }

<div id="myElement"></div>

Answer 2

在 Javascript 中，随机 Javascript 函数无法获取鼠标位置。当前鼠标位置仅来自鼠标相关事件的事件对象。因此，如果您想跟踪鼠标位置，则可以为mousemove 事件和mousedown 和mouseup 注册一个事件处理程序来跟踪按钮状态。

如果您只想显示鼠标位置，每 100 毫秒，那么您可以设置一个计时器，使其仅显示该频率，但您需要在 mousemove 事件处理程序中跟踪当前鼠标位置。

这是一个简单的代码示例：

var lastMouseX = 0, lastMouseY = 0;
document.addEventListener("mousemove", function(e) {
    lastMouseX = e.clientX;
    lastMouseY = e.clientY;
});

var mouseTimer;
document.addEventListener("mousedown", function() {
    if (!mouseTimer) {
        mouseTimer = setInterval(function() {
            document.getElementById("x").innerHTML = lastMouseX;
            document.getElementById("y").innerHTML = lastMouseY;
        }, 100);
    }
});

document.addEventListener("mouseup", function() {
    clearInterval(mouseTimer);
    mouseTimer = null;
});

<div id="x"></div>
<div id="y"></div>