需求

当用户停留超过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. [ABC246B] Get Closer

    section> Problem Statement From the point $(0,0)$ in a two-dimensional plane, let us move the dis ...

  2. 笔记3:Tensorflow2.0实战之MNSIT数据集

    最近Tensorflow相继推出了alpha和beta两个版本,这两个都属于tensorflow2.0版本:早听说新版做了很大的革新,今天就来用一下看看 这里还是使用MNSIT数据集进行测试 导入必要 ...

  3. MySQL运维12-Mycat分库分表之按天分片

    一.按天分片 指定一个时间周期,将数据写入一个数据节点中,例如:第1-10天的数据,写入到第一个数据节点中,第2-20天的数据写入到第二个节点中,第3-30天的数据节点写入到第三个数据节点中. 说明1 ...

  4. aspnetcore使用websocket实时更新商品信息

    先演示一下效果,再展示代码逻辑. 中间几次调用过程省略... 暂时只用到了下面四个项目 1.产品展示页面中第一次通过接口去获取数据库的列表数据 /// <summary> /// 获取指定 ...

  5. Kubernetes架构及安装

    K8s架构 k8s内部是有几个组件的,分别是controller manager,api-server,scheduler,kubelet以及etcd,kube-proxy还有k8s客户端kubect ...

  6. Spring WebFlux 简介

    本文基于 Spring Boot 2.6.0 基于之前提到的 Reactor 的出现,使得编写响应式程序成为可能.为此,Spring 的开发团队决定添加有关 Reactor 模型的网络层.这样做的话将 ...

  7. Spring Boot入坑-2-第一个Spring Boot项目

    Spring Boot简介 自从2014年4月Pivotal团队推出以来,作为一个基于Spring的开源轻量级框架,备受企业级应用喜爱 简化Spring应用的搭建与开发过程 是对Spring缺点进行的 ...

  8. C++篇:第十章_命名空间_知识点大全

    C++篇为本人学C++时所做笔记(特别是疑难杂点),全是硬货,虽然看着枯燥但会让你收益颇丰,可用作学习C++的一大利器 十.命名空间 命名空间可以在全局作用域或其他命名空间内部定义,但不能在函数.结构 ...

  9. 一文带你了解GaussDB(DWS) 的Roach逻辑备份实现原理

    摘要:Roach工具是GaussDB(DWS)推出的一款主力的备份恢复工具,包含物理与逻辑备份两种主要能力,本文着重于讲解Roach逻辑备份的实现原理. 一.简介 在大数据时代,数据的完整和可靠性成为 ...

  10. 云图说|移动应用安全服务—App的体检中心,全面检测,安全上路!

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 移动应用安全服务 ...