需求

当用户停留超过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. IP交付标准总结。

    RTL顶层代码,IP内部需要IP自己完成连接并保证正确,CM/PLL/MCU/SRAM/TX/RX内部模块不接受外部进行拼接,DFT内部自己处理.IP用到的宏,名称功能文档要说明清楚.优先使用硬核IP ...

  2. ClickHouse(17)ClickHouse集成JDBC表引擎详细解析

    目录 JDBC 建表 用法示例 JDBC表函数 资料分享 参考文章 JDBC 允许CH通过JDBC连接到外部数据库. 要实现JDBC连接,CH需要使用以后台进程运行的程序 clickhouse-jdb ...

  3. 开发AI量化策略所遇到的坑

    AI只是工具,想要驾驭AI还得自身有点功底,不然反而会被工具所害,甚至从信仰AI变为抵制AI.本文简单介绍开发AI量化选股策略中所遇到的各种坑,希望大家有所收获,少走弯路. 本文为BigQuant用户 ...

  4. Kernel Memory 入门系列:Kernel Memory Service

    Kernel Memory 入门系列:Kernel Memory Service 在 Kernel Memory 的 GitHub 仓库中有一个单独的项目 Service , 用于提供独立的Kerne ...

  5. RIPEMD加密算法:原理、应用与安全性

    一.引言 在信息时代,数据安全愈发受到重视,加密算法作为保障信息安全的关键技术,其性能和安全性备受关注.RIPEMD(RACE Integrity Primitives Evaluation Mess ...

  6. HTML之元素相对页面(视口)左上角的绝对坐标

    目录 一. 绝对位置 二. 相对位置 一. 绝对位置 网页元素的绝对位置,指该元素的左上角相对于整张网页左上角的坐标.无论网页滚动条如何滚动,它都是不会变化的. // 获取元素的绝对位置坐标(相对于页 ...

  7. Pikachu漏洞靶场 ../../(目录遍历)

    目录遍历 概述 在web功能设计中,很多时候我们会要将需要访问的文件定义成变量,从而让前端的功能便的更加灵活.当用户发起一个前端的请求时,便会将请求的这个文件的值(比如文件名称)传递到后台,后台再执行 ...

  8. 2023-05-19:汽车从起点出发驶向目的地,该目的地位于出发位置东面 target 英里处。 沿途有加油站,每个 station[i] 代表一个加油站, 它位于出发位置东面 station[i][

    2023-05-19:汽车从起点出发驶向目的地,该目的地位于出发位置东面 target 英里处. 沿途有加油站,每个 station[i] 代表一个加油站, 它位于出发位置东面 station[i][ ...

  9. 21、Scaffold属性 FloatingActionButton实现类似闲鱼App底 部导航凸起按钮

    FloatingActionButton详解 FloatingActionButton简称FAB ,可以实现浮动按钮,也可以实现类似闲鱼app的底部凸起导航   实现类似闲鱼App底部导航凸起按钮 c ...

  10. What?构造的查询语句会导致堆栈溢出

    摘要:本文归纳了Neo4j和Nebula两个开源图数据库的两个pull request修复的堆栈溢出问题,并试着写写通过阅读pr中的问题而得到的一些启发 本文分享自华为云社区<巧妙构造的查询语句 ...