js判断用户是否离开当前页面

 
function userLeaveCheck(threshold, leaveCallback, operCallback) {
    //时间戳，如果需要重新计算时间，可以设定这个
    var _this = this;

    _this.time = new Date().getTime();
    _this.threshold = threshold;
    _this.updateThreshold = function () {
        _this.time = new Date().getTime();
        operCallback && operCallback();
    }

    function startCheck(ms) {
        clearTimeout(_this.t);
        _this.t = setTimeout(() => {
            var timeVal = new Date().getTime();
            if (timeVal - _this.time > _this.threshold) {
                leaveCallback();
            } else {
                var n_ms = _this.threshold - (timeVal - _this.time);
                startCheck(n_ms);
            }
        }, ms + 100);
    }
    startCheck(_this.threshold);

    document.addEventListener('click', _this.updateThreshold);
    document.addEventListener('keydown', _this.updateThreshold);
};
 

threshold   多少秒判断离开

leaveCallback   判断为离开之后的回调

operCallback    这个你们可能用不到，操作回调，我讲下我这里的情况吧，如下

一个操作页面，可以在不同选项卡打开
我用心跳，来告诉服务器我还在，用户手动下线或者停止发送心跳，websocket会通知该用户所有页面下线


------------------------------------
选项卡A，在打开选项卡B
用户在选项卡B操作
选项卡A，肯定会被判定为离开嘛，我就停止发送心跳，但是他不会收到下线的通知，因为选项卡B还在维持这心跳

这个时候回到选项卡A，选项卡B是不是也会被判定为离开，停止心跳，A的心跳这个时候就要复苏对不对

不复苏，那就所有心跳都断了，这个用户就会被服务器判定为下线了，就gg了

==============================

思路

通过文档的（点击，按键）事件判断用户是否在操作，看你的操作是否有鼠标滑来滑去的操作，并且不需要按键和点击来完成的话，建议在增加多一个鼠标移动事件

在多长时间内如果用户都没有触发这些事件的话，就判定为离开了

这里还做了一个定时器的处理，让延迟更小

即：5秒判断一次，第一个五秒的第一秒的时候操作一次，后面不再操作，定时器触发，那下次一次不是5秒后，而是1秒钟