当鼠标脱离Broswer时，请停止保存到JSON文件

Question

我当前正在通过使用以下内容每1秒钟将鼠标移动坐标保存到JSON文件中：

window.onload = function() {
  setInterval(track, 1000);
}

轨道是通过Ajax将坐标保存到JSON文件的函数。

但是，当鼠标不在浏览器上时，通过使用此方法，该函数仍在每秒清新，因此在Event.clientx/y。

中采用最后保存的坐标。

我知道笨拙的功能，但是我尚未成功实施它们。我已经测试了功能，如下所示：

document.onmouseenter = function(i){
  console.log('IN');
}
document.onmouseleave = function(l){
  console.log('OUT');
}

但是，首次单击时，上述onMouseEnter funtion仅输出"在"中。虽然OnMouseLeave功能永远不会输出" Out"。

任何建议都将不胜感激

Answer 1

保存后解除X/y的设置怎么样，然后在尝试保存时检查它们是否设置？

var x, y; // store mouse coords
window.addEventListener('mousemove', function(e) {
  x = e.clientX;
  y = e.clientY;
});
setInterval(function() {
  if (x !== undefined && y !== undefined) { // check if they're set
    // save your locations, only called when mouse is moved on page
    x = y = undefined; // unset them
  }
}, 1000);

Answer 2

您可以用户以下代码。如有必要，根据您的要求对其进行修改。基本上，您需要处理以下事件：

1. 窗口负载
2. 选项卡焦点
3. 窗口模糊[代替鼠标]
4. 窗口在卸载之前[关闭浏览器之前]

$(document).ready(function() {
  $(window).load(function() {
    // Call your function to START storing the data
  });
  $(window).focus(function() {
    // Call your function to START storing the data
  });
  $(window).blur(function() {
    // Call your function to STOP storing the data
  });
  //tabCloseEvent();
  $(window).bind('beforeunload', function() {
    // Call your function to STOP storing the data
  });
});