需求

当用户停留超过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. Tomact从认识到安装与详细使用

    一.什么是Tomact? Tomcat是一个开源免费的轻量级Web服务器,它是一个软件程序,主要功能是提供网上信息浏览服务,对HTTP协议的操作进行封装,使得程序员不必对协议进行操作,让Web开发更加 ...

  2. [USACO2007NOVS] Cow Hurdles S

    题目描述 Farmer John wants the cows to prepare for the county jumping competition, so Bessie and the gan ...

  3. Kubernetes: client-go 源码剖析(一)

    0. 前言 在看 kube-scheduler 组件的过程中遇到了 kube-scheduler 对于 client-go 的调用,泛泛的理解调用过程总有种隔靴搔痒的感觉,于是调转头先把 client ...

  4. MongoDB中的分布式集群架构

    MongoDB 中的分布式集群架构 前言 Replica Set 副本集模式 副本集写和读的特性 Sharding 分片模式 分片的优势 MongoDB 分片的组件 分片键 chunk 是什么 分片的 ...

  5. Python——第五章:随机模块random

    1.浮点数random.random() 的返回值是在 [0, 1)(左闭右开区间)内的随机浮点数.这意味着它可以取到 0,但不包括 1.所以,random.random() 可以返回 0,但不能返回 ...

  6. 案例分享-Exception.getMessage突然为null

    背景 之前做的小工具一个jsqlparse+git做的小工具帮我节省时间摸鱼昨天突然停止工作,看了下jvm并没有退出,但是看日志确实有不少Error输出,虽说是一个普通的NPE,但是分析了一下却疑点重 ...

  7. Langchain-Chatchat项目:3-Langchain计算器工具Agent思路和实现

      本文主要讨论Langchain-Chatchat项目中自定义Agent问答的思路和实现.以"计算器工具"为例,简单理解就是通过LLM识别应该使用的工具类型,然后交给相应的工具( ...

  8. Java 在PDF中添加文本水印、图片水印(基于Spire.Cloud.SDK for Java)

    Spire.Cloud.SDK for Java提供了接口pdfWartermarkApi可用于添加文本水印addTextWartermark()和图片水印addImageWartermark()到P ...

  9. 数仓调优实践丨SQL改写消除相关子查询

    本文分享自华为云社区<[调优实践]SQL改写消除相关子查询>,作者: 门前一棵葡萄树 . 一.子查询 GaussDB(DWS)根据子查询在SQL语句中的位置把子查询分成了子查询.子链接两种 ...

  10. tsconfig.json在配置文件中找不到任何输入,怎么办?

    摘要:原来在我们创建tsconfig.json文件的时候,VSCode会自动检测当前项目当中是否有TS文件:如果没有的话,就会报这个错提示我们去创建一个文件,再去使用. 本文分享自华为云社区<t ...