当用户在页面上30秒内没有点击任何事件时，我很难创建注销功能
但当用户点击页面上的任何内容时，剩余时间将再次重置为30秒(或者作为另一个选项，将使用clearTimeOut和setTimeOut。
所以为了解决这个问题，我的方法是这样的：
-
setTimeout((将在用户访问此页面时开始。
-
当用户点击页面上的某个内容时，clearTimeOut将处于活动状态，setTimeOut也将再次处于活动状态
-
当用户在30秒内没有点击页面上的任何内容时，他们将通过删除本地存储中的accessToken自动注销
当前
- 通过删除accessToken使用户注销有效
- UseEffect中的setTimeOut有效
唯一重要的是
当用户在页面上点击事件时，我不知道如何使clearTimeOut((和setTimeOut工作。。
import styled from 'styled-components';
import React, {useRef, useEffect, useState} from 'react';
import ScreenContainer from '../../src/component/common/ScreenContainer';
import {useNavigate as useDomNavigate} from 'react-router-dom';
import isNil from 'lodash/isNil';
import userClient from '../../src/client/user/userClient';
const Device = () => {
const domNavigate = useDomNavigate();
const [storeId, setStoreId] = useState(() => JSON.parse(localStorage.getItem('storeId')));
const [currentDeposit, setCurrentDeposit] = useState<number>(0);
const depositBalanceInfo = userClient.getDepositBalanceByStoreId(storeId, isNil(storeId)).data;
const [time, setTime] = useState(1500);
const logout = () => {
localStorage.removeItem('accessToken');
domNavigate(`/home/home`);
};
//////////////////////////
// below is the code that I wrote to make it work..
const myFunc = () => {
// remove accessToken for logout
localStorage.removeItem('accessToken');
// move to home page
domNavigate(`/home/home`);
}
// begin setTimeOut automatically when the users come over to this page from another one.
useEffect(() => {
const timeoutBegins = window.setTimeout(myFunc, 3000);
return () => clearTimeout(timeoutBegins);
}, [])
// when the users click anything on the page, it clears current setTimeOut function and restart the setTimeOut function again.
const clickDisplay = () => {
clearTimeout(timeoutBegins);
timeOutBegins();
}
/////////////////////////////////////////
useEffect(() => {
if (storeId && depositBalanceInfo) {
setCurrentDeposit(depositBalanceInfo?.depositBalance);
}
}, [storeId, depositBalanceInfo?.depositBalance]);
return (
<ScreenContainer>
<Wrapper>
<div>Choose Payment Option</div>
<button onClick={() => window.history.back()}>go back</button>
<div>Your Balance: {currentDeposit.toLocaleString()}dollar</div>
<br />
<button onClick={() => domNavigate(`/charge/step2-select-price/?chargeMethod=card`)}>Credit Card Payment</button>
<br />
<button onClick={() => domNavigate(`/charge/step2-select-price/?chargeMethod=cash`)}>Cash Payment</button>
<br />
<button onClick={() => domNavigate(`/home/checkUserByPin`)}>Reset Password</button>
<br />
<button onClick={logout}>Logout</button>
</Wrapper>
</ScreenContainer>
);
};
const Wrapper = styled.div`
border: 1px solid red;
`;
export default Device;
您可以在useEffect 中添加EventListener进行点击
它将运行您的功能并重置超时
useEffect(() => {
document.addEventListener("click", clickDisplay);
return () => {}
}, [])
- 方法1
您可以在窗口中使用事件侦听器
const initIdleCheck = function (callback, timeLimit) {
let time;
window.onload = resetTimer;
document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer;
document.ontouchstart = resetTimer;
document.onclick = resetTimer;
document.onkeypress = resetTimer;
document.addEventListener('scroll', resetTimer, true);
function resetTimer() {
clearTimeout(time);
time = setTimeout(callback, timeLimit)
}
};
initIdleCheck(<IDLE_ACTION_FUNCTION>, <IDLE_TIME>);
// IDLE_ACTION_FUNCTION - logout in your case
- 方法2
使用类似空闲js的库。它通过自定义提供了相同的功能。
您可以使用许多方法。让我们看看其中一个
const [ isClicked , setIsClicked ] = useState(false)
useEffect ( ()=> {
const timer = setTimeOut( () => {
if(isClicked) return;
// do some thing
window.history.back()
// window.close()
} , yourTime)
return () => { clearTimeout(timer) }
} , [])
function onBtnClick () {
setIsClicked(true)
}