vue判断用户在页面停留时间是否超时

需求

当用户停留超过15分钟后,用户提交订单,提示用户超时并重新加载页面

代码

data () {
    return {
        // 超时定时器
        overTimer: null,
        // 是否超时
        isOvertime: false,
    }
},
created () {
    // 开启定时器
    this.overTimer = setTimeout(() => {
      this.isOvertime = true;
    }, 900000)
},
destroyed () {
    // 销毁定时器
    clearTimeout(this.overTimer)
},
methods: {
    submitOrder () {
        // 判定是否超时
        if (this.isOvertime) {
            this.$message.error('订单已过期,请重新下单');
            window.location.reload()
        }
    }
} 

定时器

如果方法还未被执行,可以使用 clearTimeout() 来停止计时器。
如果平时直接用的话,不必清除定时器,clearTimeout是在没执行之前清除定时器

// 设置
setTimeout(function, milliseconds);
// 清除
clearTimeout(id_of_settimeout)

 类似的:

vue 用户停留页面超过30分钟未操作 强制退出到登录页面

https://www.cnblogs.com/fmixue/p/10268660.html

 

posted @ 2020-08-19 10:55  鼓舞飞扬  阅读(3029)  评论(0编辑  收藏  举报