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>

JavaScript setTimeout() 无法自行触发

JavaScript setTimeout() can't trigger itself

javascript

settimeout