需求

当用户停留超过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. SpringCore 完整学习教程1,入门级别

    1. SpringApplication SpringApplication类提供了一种方便的方式来引导从main()方法启动的Spring应用程序.在很多情况下,你可以委托给静态的SpringApp ...

  2. Git恢复删除的文件,一行命令就可以啦~

    情况一:删除或者修改了某个文件,但是没有add # 单个 git checkout filename # 多个 git checkout . 情况二:删除或者修改了某个文件,已经add,但是没有com ...

  3. 华为防火墙1day?

    背景信息 缺省情况下,FW通过8887端口提供内置的本地Portal认证页面,用户可以主动访问或HTTP重定向至认证页面(https://接口IP地址:8887)进行本地Portal认证. 当企业部署 ...

  4. 性能集成监控系统exporter+Prometheus+Grafana

    Prometheus 是一个时序数据库,存数据 exporter是收集器,来收集被监控的数据,想要监控不同的内容,就使用不同的exporter,这个exporter应该放在被测服务器上,再把expor ...

  5. 【scikit-learn基础】--『监督学习』之 决策树分类

    决策树分类算法是一种监督学习算法,它的基本原理是将数据集通过一系列的问题进行拆分,这些问题被视为决策树的叶子节点和内部节点.决策树的每个分支代表一个可能的决策结果,而每个叶子节点代表一个最终的分类结果 ...

  6. 全网最全的华为ensp数通设备命令全集

    [命令] display history-command [视图]所有视图 [参数]无 [描述] display history-command 命令用来显示当 前用户曾键入的最后 10 条命令.用户 ...

  7. wpf 叫号系统

    wpf 叫号系统 桌面版 wpf 叫号系统 C# .Net 4.8 WPF 数据库 SQLServer 2012 数据队列 Redis 日志 log4net 叫号系统客户端登陆 设置,职称设置,科室和 ...

  8. 文心一言 VS 讯飞星火 VS chatgpt (52)-- 算法导论6.2 4题

    四.当i>A.heap-size/2 时,调用 MAX-HEAPIFY(A,i)会有什么结果? 文心一言: 当 i > A.heap-size/2 时,调用 MAX-HEAPIFY(A, ...

  9. .NET技术分享日活动-202104

    2021年4月27日下午,个人组织举办了山东地区的山东.NET技术分享日活动.围绕互联网技术.大数据.机器学习.业务实践等方向进行创新技术的实践分享. 本次技术分享日活动面向了山东地区广大的.NET ...

  10. 云图说|新一代Serverless应用托管引擎——CAE

    本文分享自华为云社区<云图说|新一代Serverless应用托管引擎--CAE>,作者:阅识风云. 开发运营一个应用软件,面临种种挑战:软件栈厚重.开发上线慢.资源易浪费.运维投入高.突发 ...