监听用户长时间未操作页面就自动退出登录

   
// 需求：当用户一定时间内没有操作页面，则自动退出登录。操作页面包括页面点击、摁下键盘、鼠标移动、鼠标滚动滚轴等。由于这些操作会频繁操作，建议使用防抖函数来减少性能的消耗。以下是js部分。
// 获取浏览器页面
var zBody = document.querySelector('html');
// 获取服务器的超时登录时长
let timeout = localStorage.getItem('timeout') || 0;
// 轮询
var zNum = 0; // 用户未操作页面时长
var maxTime = timeout;
// 用户操作
const handleDo = (params) => {
	//console.log(params); //可以传入参数
	zNum = 0; // 用户操作了页面，初始化用户未操作页面时长，重新开始计时。
};

// 防抖函数
const debounce = (func, wait, params) => {
	let timeout;
	return function() {
		if (timeout) clearTimeout(timeout);
		let callNow = !timeout;
		timeout = setTimeout(() => {
			timeout = null;
		}, wait);
		if (callNow) func(params);
	};
};
// 将debounce(handleDo, 1000)返回的匿名函数赋值给handleDo2
let handleDo2 = debounce(handleDo, 1000); //第三个参数可选，需要传值时可以放入一个对象中传递参数
useEffect(
	() => {
		var zTimer = setInterval(() => {
			zNum++;
			if (zNum >= maxTime) {
				if (dispatch) {
					// 自动退出登录
					dispatch({
						type: 'login/logout'
					});
				}
			}
		}, 1000);
		return () => {
			// 销毁组件时，移除定时器
			clearInterval(zTimer);
		};
	}
);

useEffect(() => {
	// 监听用户是否操作页面，包括点击、键盘、鼠标移动、鼠标滚动滚轴
	// 存在以下两个问题
	// 1、只监听、移除handleDo，无法做到页面的防抖，消耗性能，不可取。
	// zBody.addEventListener('click', handleDo);
	// 2、只监听、移除debounce(handleDo,1000)，无法在组件销毁的时候移除监听事件（因为debounce(handleDo,1000)返回的是匿名函数，无法移除匿名函数的事件监听），容易造成内存泄漏，不可取。
	// zBody.addEventListener('click', debounce(handleDo,1000));
	// 推荐下面的监听方法，可以做到防抖，也可以正确移除监听事件。
	zBody.addEventListener('click', handleDo2);
	zBody.addEventListener('keydown', handleDo2);
	zBody.addEventListener('mousemove', handleDo2);
	zBody.addEventListener('mousewheel', handleDo2);
	return () => {
		// 销毁组件时，移除监听事件
		zBody.removeEventListener('click', handleDo2);
		zBody.removeEventListener('keydown', handleDo2);
		zBody.removeEventListener('mousemove', handleDo2);
		zBody.removeEventListener('mousewheel', handleDo2);
	};
}, []);