uniapp h5 js设置监听:超时未操作返回首页(全局只监听一次,可设置监听事件+检查时间+超时时长)

server/2024/12/16 17:56:07/

功能实现:

  1. 可自定义超时时长,检查时间
  2. 超时后跳转首页(/pages/home/index/index);
  3.  如果在首页,则不进行跳转
  4. 监控状态下, 用户有任意操作(包括但不限于点击,滑动,跳转页面等),则重置监听,重新开始算时间
  5. 超时方法及逻辑封装到单独的js文件中
  6.  全局只需在app.vue创建监听,其他页面无需修改

具体代码:

1. 创建timeout.js文件, 代码如下:

javascript">export const timeOut = () => {let lastTime = null; //最后一次操作时间let currentTime = null //当前时间let sys_timeout = 3 * 60 * 1000; // 超时时间(我设置了3分钟,可自行修改)let check_time = 10 * 1000; //检查时间(每隔多长时间检查一次, 可自行修改)let goOut = null; //计时器let home_path = 'pages/home/index/index'; //首页地址const isTimeOut = () => {// 页面上一次的操作时间lastTime = uni.getStorageSync('lastOperationTime');if (!lastTime) {clearInterval(goOut);}currentTime = new Date().getTime()// 判断是否超时if ((currentTime - lastTime) > sys_timeout) {console.log("超时了")return true;} else {return false;}}const isLoginOut = () => {clearInterval(goOut);goOut = setInterval(() => {const pages = getCurrentPages();const currentPage = pages[pages.length - 1];const pagePath = currentPage.route;if (isTimeOut()) {console.log('当前页面路径为:' + pagePath);if (pagePath.indexOf(home_path) == -1) {uni.reLaunch({url: `/${home_path}`,});}}}, check_time);}isLoginOut();
}

2. 在App.vue文件中加入:

javascript">onLaunch: function() {console.log('App Launch');//超时返回首页uni.setStorageSync('lastOperationTime', new Date().getTime()); //设置最后一次操作时间timeOut();setTimeout(function() {const events = ['click', 'mousemove', 'keydown', 'scroll', 'keypress', 'touchstart'];var body_ = document.getElementsByTagName('body')[0];events.forEach(e => {body_.addEventListener(e, function() {uni.setStorageSync('lastOperationTime', new Date().getTime()); //设置操作时间});});}, 1000);
}

tips: events 中包含了基本的点击事件, 滑动事件等,具体可自行修改

参考下图


http://www.ppmy.cn/server/150688.html

相关文章

leetcode 面试经典 150 题:移除元素

链接移除元素题序号27类型数组解题方法双指针难度简单 题目 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素。元素的顺序可能发生改变。然后返回 nums 中与 val 不同的元素的数量。 假设 nums 中不等于 val 的元素数量为 k,要…

聊聊Oracle自适应查询优化

成也AQO败也AQO 因为工作的原因,我们接触到的客户大部分是金融和运营商行业,这些客户有个最大的特点是追求稳定,对于使用数据库新特性持保守的态度,不会轻易尝试某些可能会导致生产系统不稳定的新特性。上线前通常都会将一些新特…

SpringBoot【十】mybatis之xml映射文件>、<=等特殊符号写法!

一、前言&#x1f525; 环境说明&#xff1a;Windows10 Idea2021.3.2 Jdk1.8 SpringBoot 2.3.1.RELEASE 在利用mybatis进行开发的时候&#xff0c;编写sql时可能少不了>、<等比较符号&#xff0c;但是在mapper映射文件中直接使用是不行的&#xff0c;会报错&#xff0…

Guava库 学习入门--概览与入门

Guava库的介绍 Guava库是由Google开发的Java开源库&#xff0c;它的主要目的是简化常见的编程任务&#xff0c;提供高效的数据处理方法。Guava库中的功能覆盖了从集合操作、缓存、函数式编程、并发编程以及其他诸多实用的工具类。 Guava的安装与依赖配置 Guava库可以通过Mav…

使用Docker部署FTP和Nginx并通过HTTP访问FTP里的文件

使用 Docker 部署 FTP 和 Nginx 通过 HTTP 访问 FTP 里的文件&#xff0c;这是一个常见的需求&#xff0c;通常用于将存储在 FTP 服务器上的文件通过 Web 方式提供访问。以下是如何操作的详细步骤&#xff1a; 1. 部署 FTP 服务器 (vsftpd) 我们使用 fauria/vsftpd 镜像&…

修复代码漏洞的具体案例(C++/HTML/PHP/SQL/JavaScript)

以下是一些修复代码漏洞的具体案例&#xff1a; 案例一&#xff1a;SQL 注入漏洞修复&#xff08;Web 应用程序&#xff09; 漏洞描述 假设一个简单的用户登录功能的 PHP 代码存在 SQL 注入漏洞。代码可能类似于以下部分&#xff1a; php $username $_POST[username];$pass…

AIGC 014-ConsisID通过频率解耦将角色信息注入到文生视频模型

AIGC 014-ConsisID通过频率解耦将角色信息注入到文生视频模型 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 身份保持的文本到视频生成是视频生成领域一个极具挑战性的任务&#xff0c;其目标是创建与给定文本描述相符且具有一致身份的视频。作者提出了一种名为 Consi…

PyQt事件机制练习

一、思维导图 二、代码 import sysfrom PyQt6.QtTextToSpeech import QTextToSpeech from PyQt6.QtWidgets import QApplication, QWidget, QLabel, QPushButton, QLineEdit from PyQt6 import uic from PyQt6.QtCore import Qt, QTimerEvent, QTimeclass MyWidget(QWidget):d…