js 监听当前页面是否正在被用户浏览

需求：当用户浏览当前网页的时候，每隔3s或者5s调取一次数据接口，进行页面数据的刷新。

方案1:监听用户在当前页面上鼠标是否有移动，如果有移动则执行函数刷新页面数据

 //做判断 当dom上有操作的时候 开始执行接口 每5s刷新一次数据
   // 为window添加mousemove，移动时设置变量为true,静止后为false;
  (function () {
    let isMove = false, timer = null;
    window.onmousemove = function () {
      isMove = true;
      clearTimeout(timer);
      console.log('移动时',isMove); // 移动时
      timer = setTimeout(function () {
        isMove = false;
        refreshCount()
        console.log('静止后',isMove); // 静止后
      }, 5000);
    }
  }());

但是这样做，在我本地测试没有问题，去老大电脑上演示时，鼠标不移动也在不停的打印，导致这个方法被pass掉。

方案2：使用visibilitychange事件与focus、blur事件相结合，判断用户是否浏览当前页面

<script>
    $(document).on('visibilitychange', function(e) {
        if (e.target.visibilityState === "visible") {
            document.title = '被发现啦!';
        } else if (e.target.visibilityState === "hidden") {
            document.title = '藏好啦!';
        }
    });

	window.onblur = function () {
	    console.log("失去焦点");
	}
	document.addEventListener('visibilitychange',function(){
	    if(document.visibilityState==='hidden'){
	        console.log("选项卡切换");
	    }
	});
</script>

这需要用户点击别的选项卡或者在当前页面中有操作时才会捕捉到，但是并不好去实时的知道用户是否浏览当前页面。


方案3：使用当前页面中的某一个元素做监听（例如元素list-page）

 setInterval(()=>{
      if(!$("#list-page").is(":hidden")){
        window.refreshCount();//执行刷新页面数据的方法
      }
    },15000)