Блог

Главная - Вопросы по программированию - Как отменить setTimeout при переходе на другую страницу?

Как отменить setTimeout при переходе на другую страницу?

#javascript #html #css #reactjs #settimeout

#javascript #HTML #css #reactjs #settimeout

Вопрос:

Добрый вечер, не могли бы вы посоветовать решение для отмены setTimeout при переходе пользователя на другие страницы (например, перейти по другим ссылкам, нажать кнопку «Назад» браузера, но не переходить на другие вкладки). Я пробовал событие окна «выгрузка», но, похоже, оно работает не так, как ожидалось.

Мое приложение ведет обычный обратный отсчет, если оно считает до 0, оно автоматически перейдет на назначенную страницу. Для какой-то цели мне нужно отключить эту автоматическую навигацию, если пользователь нажимает на другие ссылки во время подсчета. Большое вам спасибо.

 import React, { useEffect } from 'react';
import {useHistory} from "react-router-dom";

const SucessPurchaseSubmit = () => {
    const history = useHistory();
    const navigateTo = () => history.push("/house-catalog");
    useEffect(() => {
        const time = document.querySelector(".time");
        let count = 10;
        var timer;
        // automatic navigate to full catalog after 10 seconds
        function countToNavigate(){
            clearTimeout(timer);
            time.innerHTML = count;
            if (count === 0) {
                navigateTo();
            }
            count -= 1;
            timer = setTimeout(countToNavigate, 1000)
        }
        countToNavigate();
        window.addEventListener("unload", () => {
            clearTimeout(timer);
        })
    })
    return (
        <section className="success-purchase-submit">
            <h1>Thank you so much for your information</h1>
            <h3>One of our consultants will contact you very shortly</h3>
            <h5>In the mean time, we will back to Full Catalog automatically after:</h5>
            <h5 className="time">10</h5>
        </section>
    );
};

export default SucessPurchaseSubmit;

Комментарии:

1. нет необходимости отменять тайм-аут при выходе со страницы

2. Я думаю, вы меня неправильно поняли. Дело в том, что пользователь все еще находится на веб-сайте, поэтому он не покидает страницу, а просто переходит с этого URL-адреса на другой URL-адрес на том же веб-сайте.

3. Путаница здесь заключается в том, что пользователь переходит на другой клиентский маршрут в React, а не на новую страницу в традиционном смысле.

4. перед загрузкой, а не выгрузкой, в react, если вы измените маршрут, снимите таймер в маршрутизаторе.

5. чтобы отменить setTimeout при переходе пользователя на другие страницы — нет, я вас совсем не неправильно понял

Ответ №1:

Возможно, я нашел решение вашей проблемы.

 const FunctionalComponent = () => {
 React.useEffect(() => {
   return () => {
     console.log("Bye");
   };
 }, []);
 return <h1>Bye, World</h1>;
};

На это ссылаются из — https://www.twilio.com/blog/react-choose-functional-components

Вы можете использовать clearInterval() внутри useEffect() .

useEffect() работает аналогично «OG» componentWillUnmount() . Это идеальное место для clearInterval() после перенаправления на новую страницу.

Ответ №2:

Согласно https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect , вы можете вернуть функцию из useEffect для выполнения очистки при отключении компонента.

Итак, в конце функции useEffect вы, вероятно, можете добавить:

 return () => clearTimeout(timer);

Чтобы отменить время ожидания при удалении компонента.