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>
Метки:

На сайте отсутствует реклама! Значете почему?

Помогать людям - моё хобби. А навыки разработчика позволяют не парится нулевой монетизизацией этого сайта. Хотя...

Если вам помогла информация, то даже от доната в 40 рублей мне будет приятно. Докину немного, куплю латте в макдаке, вспомню за чей счет банкет и карма вам зачтется!

Но и просто оставленный комментарий благодарности ниже принесет мне улыбку радости :)

А если захочется написать всякие гадости с переходом на личности, да тоже не стесняйтесь, но обычно я отправляю такое в спам. Люблю, когда дома чисто.

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

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