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 ...
随机推荐
- lua完整学习笔记
lua注释 -- 单行注释 --[[ 多行注释 ]]-- lua数据结构 nil 无效值与Java的Null类似,但是在条件表示中是false boolean 布尔值,tu ...
- springBoot——整合junit
spring整合junit复习 springBoot整合junit package com.example.springboot_04; import com.example.springboot_0 ...
- 安卓之DocumentsProvider应用场景以及优劣分析
文章摘要 本文深入探讨了安卓DocumentsProvider的应用场景,分析了其优势与不足,并提供了简单的代码实现.DocumentsProvider是安卓系统中用于文件存储与访问的关键组件,为应用 ...
- Python——第四章:函数的递归调用
递归: 函数自己调用自己 递归如果没有任何东西拦截的话. 它默认就是一个死循环 def func() func() func() 因此递归调用的时候需要有判断,来退出循环 def func() if ...
- Ubuntu安装Maridb 10.5版本
以20.04版本为例 Ubutun20.04自带源默认安装的mariadb版本为10.3不符合安装zabbix6.0的要求 打开MariaDB的官方网站:https://mariadb.org/mar ...
- Hystrix:Spring Cloud服务熔断与降级组件
Hystrix:Spring Cloud服务熔断与降级组件 问题总结 熔断器? Spring Cloud Hystrix? Hystrix服务降级? 全局降级方法? 解耦降级逻辑? Hystrix服务 ...
- UnionFind 并查集
简介 UnionFind 主要用于解决图论中的动态联通性的问题(对于输入的一系列元素集合,判断其中的元素是否是相连通的). 以下图为例: 集合[1, 2, 3, 4] 和 [5, 6]中的每个元素之间 ...
- VSCode C++开发环境配置: LLVM clang clangd
工欲善其事,必先利其器 llvm/clang 比 VSCode 自带的代码提示功能速度更快,功能更强(支持 clang-tidy). 安装 llvm.clang sudo apt install ll ...
- SSH默认端口从22修改为其他端口
1.在终端中使用root权限登录到您的Linux服务器. 2.打开终端,并使用适合您的文本编辑器(如vi.nano等)打开SSH配置文件.例如,通过运行以下命令之一: vi /etc/ssh/sshd ...
- 分门别类输入输出,Go lang1.18入门精炼教程,由白丁入鸿儒,go lang基本数据类型和输入输出EP03
前文再续,Go lang和Python一样,基础数据类型有着很多分类,分门别类,一应俱全.它们对应着不同的使用场景,分别是:整形.浮点.字符.字符串.布尔等等.常用的基本数据类型经常会参与日常业务逻辑 ...