页面编辑超时的处理

最近实现了一个小需求，有一个填写页面数据的功能，要求假如用户超过20分钟还没有操作的话，就要踢出该用户（不是重新登录），让他重新刷新页面或者重新打开一次，这么做的目的是：由于一个页面可能同时被多个人所编辑，所以为了避免多人保存数据时旧数据把新数据覆盖掉，一个页面同时被多人打开时，只有最先进来的人可以保存，其他人得排队等待，但是如果这个人一直不操作，也不能一直锁着页面，那么就应该踢出，重新排队。

---

1. 实现一个定时器，当时间达到指定长度，就向后端发送请求，要求解锁页面，并更新页面状态。客户端收到响应后，利用confirm弹窗告知用户已经超时。
2. 监听一个全局的点击事件，当触发点击事件时，回调函数中去清除定时器，并重新设置定时器。
3. 当用户刷新或关闭页面时，也要发送请求。所以这里需要监听onbeforeunload事件。
4. 由于这个页面的结构是套着一个iframe的，为了在iframe中点击事件也能触发父窗口的回调事件，也在iframe中添加了全局的点击事件，并且通过postMessage的方式告知父窗口，再去执行相应回调。这里有个小细节，在添加事件回调的时候，注册的事件是在捕获阶段生效的，这是出于为了尽快响应用户操作的目的。

---

这里附上部分的代码

    /* 监听关闭页面事件*/
    closePageHandler: function() {
        var _self = this;
        window.addEventListener('beforeunload',function(e){
            _self.unLockPage();
        });
    },
    /* 添加全局点击事件 */
    addTimeoutHandler: function() {
        var _self = this;
        this.mainTimer = setTimeout(this.closeConnection.bind(_self),20*60*1000);
        window.document.body.addEventListener('click',this.globalClickHandler.bind(_self),true);
    },
    /* 全局点击事件句柄 */
    globalClickHandler:function(){
        clearTimeout(this.mainTimer);
        this.mainTimer = setTimeout(this.closeConnection.bind(this),20*60*1000);
    },
    /* 编辑超时逻辑*/
    closeConnection:function(){
        var _self = this;
        var cb = function(res){
            clearTimeout(_self.mainTimer);
            if (res.code === 200){
                if (confirm('您已超时')){
                    window.location.reload();
                }else{
                    window.close();
                }
            }        
        };
        _self.unLockPage(cb);
    },
    //解锁页面回调
    unLockPage:function(cb){
        $.ajax({
            url: 'xxx',
            type: 'POST',
            timeout:5000,
            data: {
                unitId: pageConfig.targetId,
            }
        }).done(function(res){
            cb && cb(res);
        });
    },