需求

当用户停留超过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

vue判断用户在页面停留时间是否超时的更多相关文章

  1. js判断用户关闭页面或浏览器

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  2. php判断用户设备类型

    最近做的一个需求里面希望能判断用户访问页面的设备类型,根据不同的类型去加载不同的数据和页面样式.由于技术栈是使用的php,于是考虑在php层面去做这个判断. 假设主要判断的设备有平板和手机为主,分两个 ...

  3. C#分析搜索引擎URL得到搜索关键字,并判断页面停留时间以及来源页面

    前台代码: var start; var end; var state; var lasturl = document.referrer; start = new Date($.ajax({ asyn ...

  4. js记录用户访问页面和停留时间

    1.setInterval setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval(code,millisec[,"lang" ...

  5. vue使用vue-router beforEach实现判断用户登录跳转路由筛选

    vue使用vue-router beforEach实现判断用户登录跳转路由筛选 :https://www.colabug.com/3306814.html 在开发webApp的时候,考虑到用户体验,经 ...

  6. php 用户访问菜单页面,必须登录,判断用户是否登录

    <pre name="code" class="python"># 本节课大纲: 一.空模块和空操作 1.空操作 function _empty($ ...

  7. 利用HTML5判断用户是否正在浏览页面技巧

    现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务.同时还有新的document.hidde ...

  8. 使用HTML5里页面可见性接口判断用户是否正在观看你的页面

    转自:http://www.webhek.com/page-visibility 长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法.用户是否去看别的网站了?他们切换回来了么?现在,HT ...

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

    简介 VisibilityChange 事件:用于判断用户是否离开当前页面 Code // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidde ...

  10. js 怎样判断用户是否在浏览当前页面

    有些时候我们需要在项目中判断用户是否在浏览当前页面,或者当前页面是否处于激活状态.然后再进行相关的操作.浏览器中可通过window对象的onblur.onfocus判断,或者document的hidd ...

随机推荐

  1. [python][图像切割]给定手写数字图片完成数字切割

    import torch import torch.nn as nn from torchvision import transforms from PIL import Image, ImageOp ...

  2. easycom自动导入自定义组件

    使用时要先创建一个这样的结构 相当于定义一个方法,所有的页面引用就可以了

  3. Colaboratory使用教程

    Google Colaboratory 是一个 Google 研究项目,旨在帮助传播机器学习培训和研究成果.它是一个 Jupyter 笔记本环境,不需要进行任何设置就可以使用,并且完全在云端运行.同时 ...

  4. 流媒体服务器ZLMediaKit与FFmpeg

    流媒体服务器ZLMediaKit与FFmpeg overview 关键字:ZLMediaKit.FFmpeg.srt.vlc 如果想快速拥有自己的流媒体服务器,那么可以使用开源项目自己搭建.开源的流媒 ...

  5. 若依集成knife4j实现swagger文档增强

    若依集成knife4j实现swagger文档增强 本期全是干货,这里我就当你用的非常熟练了,在ruoyi-admin模块中pom文件里加入以下依赖 注:引用knife4j-spring-boot-st ...

  6. Typora远程代码执行漏洞 - CVE-2023-2317

    Typora - CVE-2023-2317 简介 Typora一个常用的markdown编辑器,在1.6.7之前存在XSS漏洞,可以通过传入参数触发来加载恶意的JavaScript代码 分析 在ty ...

  7. JavaFx 打包jar(六)

    JavaFx 打包jar(六) JavaFX 从入门入门到入土系列 我们编写了不少javafx,那么如何打包成jar给用户呢?下面我给出比较全的打包方式. 打包jar 下面我给出比较全的打包方式. 1 ...

  8. Kubernetes常见错误总结

    1.屏幕持续打印Pod日志报error: unexpected EOF错误 Kubernetes: requesting flag for "kubectl logs" to av ...

  9. Flutter定时器

    代码 const timeout = Duration(seconds: 3); var t=Timer.periodic(timeout, (timer) { print('afterTimer=' ...

  10. 云原生时代,政企混合云场景IT监控和诊断的难点和应对之道

    摘要:正是因为政企IT架构云化的云原生架构,相比之前的单体烟囱式架构,在监控诊断方面有着更多的难点和挑战,这也在业界催生出大量相关的标准和工具. 本文分享自华为云社区<[华为云Stack][大架 ...