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

功能实现:

  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 中包含了基本的点击事件, 滑动事件等,具体可自行修改

参考下图

相关推荐
三年三月2 分钟前
021-顶点法线与反射原理
javascript·three.js
快起来别睡了13 分钟前
React 是如何用 JSX 写页面,却能被浏览器执行的?——Babel 的魔法解析
前端
喧星Aries24 分钟前
进程调度的时机,切换与过程方式(操作系统OS)
java·服务器·前端·操作系统·进程调度
海底火旺26 分钟前
useState:批处理与函数式更新
前端·react.js·面试
一块plus26 分钟前
一门原本只是“试试水”的课程,没想到炸出了一群真诚的开发者
javascript·面试·github
亿万托福28 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户408128120038128 分钟前
JWT 和 token 区别
前端
yvvvy29 分钟前
🚀React + Vite 实战:打造智能单词学习应用
javascript
盏茶作酒2929 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天30 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript