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持续性拉取后台数据

网站导航

网站导航