Svelte — кнопка автообновления

Admin Svelte

Пример кнопки с отчетом таймера на Svelte, после или в течении которого происходит какое-нибудь событие. Это событие обновляет страницу или подтягивает данные аяксом без обновления.

В примере ниже, по кнопке запустить обновления, запускаются обновления и счетчик отчитывается до 0, после которого снова будет запущено обновление. И т.д. пока не отключить.

Первичное подключение функций svelte не связанных с таймером, но завязанных на нём: аякс запросы, которые подтягиваются на страницу.

<script>
    import {onMount} from "svelte";

    let updatedAtPortfolio, updatedAtPriceInPortfolio, updatedAtOperations, updatedAtPrices;

    onMount(async () => {
        getDates()
    });

    // Получение дат обновления
    function getDates() {
        updatedAtPortfolio = getFetch('get-updated-at-portfolio/');
        updatedAtPriceInPortfolio = getFetch('get-updated-at-price-in-portfolio/');
        updatedAtOperations = getFetch('get-updated-at-operations/');
        updatedAtPrices = getFetch('get-updated-at-prices/');
    }

    function getUpdatedDate() {
        getFetch('update-all-information/').then(() => {
            getDates()
            window.location.reload();
        });
    }

Непосредственно функции таймера в Svelte:

    let varSetInterval,
            varSetTimeout,
            timer = '-',
            status = 'ВЫКЛ';

    function setTimer() {
        timer = 60;
        status = 'ВКЛ';
        document.cookie = 'svelteLiveUpdate=1';

        varSetInterval = setInterval(() => {
            if (timer > 0) timer--;
        }, 1000);

        varSetTimeout = setTimeout(function () {
            // Запускаем обновление по окончанию таймера
            getUpdatedDate();

            // Сбрасывает таймер
            clearInterval(varSetInterval);
            clearTimeout(varSetTimeout);
            setTimer();
        }, 60000);
    }

    if (getCookie("svelteLiveUpdate") === '1') {
        setTimer();
    }

    let stop = false;

    function clickLiveReload() {
        if (getCookie("svelteLiveUpdate") === '1') {
            // Запускаем обновление при нажатии кнопки
            if (!stop) {
                getUpdatedDate();
                stop = true;
            }

            document.cookie = 'svelteLiveUpdate=0';
            clearInterval(varSetInterval);
            clearTimeout(varSetTimeout);
            timer = '-';
            status = 'ВЫКЛ';
            return;
        }

        setTimer();
    }
</script>

Таблица на скрине. Здесь при клике на кнопку срабатывает функция clickLiveReload из кода выше. Она же запускает обновление, сохраняет куки и включает/выключает таймер на svelte.

<div class="table table-links">
    <div class="body">
        <div class="item link center" on:click={clickLiveReload}>
            {#if timer === '-'}
                <dic class="cell">Обновить и запустить автообновление</dic>
            {:else}
                <dic class="cell">Обновится через {timer} секунд</dic>
            {/if}
        </div>

        {#await updatedAtPortfolio}
        {:then updatedAtPortfolio}
            <div class="item">
                <div class="cell name">Портфель:</div>
                <div class="cell date center">{updatedAtPortfolio}</div>
            </div>
        {/await}

        {#await updatedAtPriceInPortfolio}
        {:then updatedAtPriceInPortfolio}
            <div class="item">
                <div class="cell name">Тек. цены в портфеле:</div>
                <div class="cell date center">{updatedAtPriceInPortfolio}</div>
            </div>
        {/await}

        {#await updatedAtOperations}
        {:then updatedAtOperations}
            <div class="item">
                <div class="cell name">Все операции:</div>
                <div class="cell date center">{updatedAtOperations}</div>
            </div>
        {/await}

        {#await updatedAtPrices}
        {:then updatedAtPrices}
            <div class="item">
                <div class="cell name">Цены на {nameOfShare}:</div>
                <div class="cell date center">{updatedAtPrices}</div>
            </div>
        {/await}
    </div>
</div>
Метки:

Читайте также

У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Svelte — кнопка автообновления"