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 @   鼓舞飞扬  阅读(3080)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示