当用户在 React 页面上 30 秒内没有进行任何点击事件时，我正在努力创建注销功能

Question

当用户在页面上 30 秒内没有进行任何点击事件时，我正在努力创建注销功能。

但是当用户点击页面上的任何内容时，剩余时间将再次重置为 30 秒（或者作为其他选项，将使用clearTimeOut和setTimeOut。）同时，当用户没有点击页面上的任何内容时，他们删除 accessToken 将在 30 秒后自动注销。

所以为了解决这个问题，我的做法是这样的：

1. 当用户来到这个页面时，setTimeout()将开始。

2. 当用户点击页面上的某些内容时，clearTimeOut 将被激活，setTimeOut 也会再次被激活

3. 当用户在 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;

Answer 1

您可以在 useEffect 中添加用于单击的事件监听器

，它将运行您的函数并重置超时

 useEffect(() => {
      document.addEventListener("click", clickDisplay);
      return () => {}
 }, [])

Answer 2

• 方法 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

使用类似 idle-js。它提供相同的功能和自定义功能。

Answer 3

您可以使用多种方法。让我们看一下其中的一个

    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)
   }