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

参考下图

相关推荐
鱼樱前端1 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig2 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少2 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder2 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix2 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句2 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易2 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
汤姆Tom2 小时前
JavaScript reduce()函数详解
javascript
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript