vue判断用户在页面停留时间是否超时
需求
当用户停留超过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判断用户在页面停留时间是否超时的更多相关文章
- js判断用户关闭页面或浏览器
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- php判断用户设备类型
最近做的一个需求里面希望能判断用户访问页面的设备类型,根据不同的类型去加载不同的数据和页面样式.由于技术栈是使用的php,于是考虑在php层面去做这个判断. 假设主要判断的设备有平板和手机为主,分两个 ...
- C#分析搜索引擎URL得到搜索关键字,并判断页面停留时间以及来源页面
前台代码: var start; var end; var state; var lasturl = document.referrer; start = new Date($.ajax({ asyn ...
- js记录用户访问页面和停留时间
1.setInterval setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval(code,millisec[,"lang" ...
- vue使用vue-router beforEach实现判断用户登录跳转路由筛选
vue使用vue-router beforEach实现判断用户登录跳转路由筛选 :https://www.colabug.com/3306814.html 在开发webApp的时候,考虑到用户体验,经 ...
- php 用户访问菜单页面,必须登录,判断用户是否登录
<pre name="code" class="python"># 本节课大纲: 一.空模块和空操作 1.空操作 function _empty($ ...
- 利用HTML5判断用户是否正在浏览页面技巧
现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务.同时还有新的document.hidde ...
- 使用HTML5里页面可见性接口判断用户是否正在观看你的页面
转自:http://www.webhek.com/page-visibility 长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法.用户是否去看别的网站了?他们切换回来了么?现在,HT ...
- js判断用户是否离开当前页面
简介 VisibilityChange 事件:用于判断用户是否离开当前页面 Code // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidde ...
- js 怎样判断用户是否在浏览当前页面
有些时候我们需要在项目中判断用户是否在浏览当前页面,或者当前页面是否处于激活状态.然后再进行相关的操作.浏览器中可通过window对象的onblur.onfocus判断,或者document的hidd ...
随机推荐
- DI入门案例
1.基于IoC管理bean 2.Service中使用new形式创建的Dao对象是否保留?(不保留) 3.Service中需要的Dao对象如何进入到Service中?(提供方法) 4.Service与D ...
- javaAPI操作hbase对表格的增删改查
package org.example; import org.apache.hadoop.hbase.NamespaceDescriptor; import org.apache.hadoop.hb ...
- 华企盾DSC服务器无法启动常见处理方法
先查看<服务问题判断>文档.常见的 1.授权已经过期--需延长授权 2.ERR_BASE64 – 机器码变更 3.不能在该计算机上使用该数据库,需要解锁才可以--打开服务器配置解锁数据库 ...
- Linux服务器安装好Jenkins,IP+端口无法访问的问题排查
1.是否已安装jdk,命令:java -version 2.查看Jenkins进程是否还在,命令 ps -ef|grep jenkins 3.查看8080(Jenkins默认)端口号是否开放,命令:f ...
- ElasticSearch之Open index API
打开指定的索引. 命令样例如下: curl -X POST "https://localhost:9200/testindex_003/_open?pretty" --cacert ...
- CUDA驱动深度学习发展 - 技术全解与实战
全面介绍CUDA与pytorch cuda实战 关注TechLead,分享AI全维度知识.作者拥有10+年互联网服务架构.AI产品研发经验.团队管理经验,同济本复旦硕,复旦机器人智能实验室成员,阿里云 ...
- docker: 'buildx' is not a docker command
解决方法 sudo apt install docker-buildx-plugin
- Flutter Getx 状态管理 --- 响应式状态管理器
状态管理 Get 并不是比任何其他状态管理器更好或更差,而是说你应该分析这些要点以及下面的要点来选择只用 Get,还是与其他状态管理器结合使用. Get不是其他状态管理器的敌人,因为Get是一个微框架 ...
- FQS:一种神奇的数仓查询优化技术
本文分享自华为云社区<根据执行计划优化SQL[绽放吧!GaussDB(DWS)云原生数仓]>,作者:西岭雪山. 引言 如果您刚接触DWS那一定会好奇想要知道"REMOTE_FQS ...
- 你知道,什么时候用Vue计算属性吗?
摘要:当我们处理复杂逻辑时,都应该使用计算属性. 本文分享自华为云社区<深入理解计算属性,知道什么时候该用Vue计算属性吗?>,作者: 前端老实人 . 计算属性 有些时候,我们在模板中放入 ...