Как установитьInterval и clearInterval для одного объекта DOM с помощью .click? - PullRequest
Новая
       11

Как установитьInterval и clearInterval для одного объекта DOM с помощью .click?

0 голосов
/ 03 февраля 2019

BLUF : я пытаюсь добавить функцию, которая будет динамически преобразовывать элемент времени из формата 24 часа в 12 часов и наоборот.Все объекты даты и времени работают должным образом, однако я немного над головой и не могу понять, как добавить эту функцию.

ПРЕДПОСЫЛКИ : Я пытаюсьзамените формат времени (12 / 24ч) при возникновении события .click.У меня это в основном работает, но я не могу понять, как остановить одну функцию и запустить другую, используя тот же селектор, чтобы пользователь мог переключаться между форматами времени без необходимости обновлять DOM.

ВЫПУСК : Используя приведенный ниже код при нажатии TIME DIV, он преобразует время в 12-часовой формат (setTime12), но при нажатии того же селектора для обратного преобразованиядо 24 ч (setTime24), элемент «ВРЕМЯ» переключается назад и вперед между 12 и 24-часовыми форматами каждую секунду.Очевидно, это потому, что clearInterval не применяется должным образом, поэтому обе функции выполняются одновременно.

Итак, как мне динамически запускать функции setTime12 & setTime24, если они невыполняется одновременно?

CHEERS!

Вот GIF-файл, иллюстрирующий проблему:

homepage_interval_gif

HTML : 

<div class="timeArea">
    <p class="time" id="time" data-switch="b">
        <span id="hours"></span><span id="colon">:</span><span id="minutes"></span>
        <span class="date"></span>
    </p>
</div>

JS: 

function setTime24() {
    var d = new Date().toLocaleTimeString('en-US', {
        hour12: false,
        hour: 'numeric',
        minute: 'numeric',
    });
    var parts = d.split(":");
    $('#hours').text(parts[0]);
    $('#minutes').text(parts[1]);
    $("#colon").css({
        visibility: toggle ? "visible" : "hidden"
    });
    toggle = !toggle;
};

function setTime12() {
    var d = new Date().toLocaleTimeString('en-US', {
        hour12: true,
        hour: 'numeric',
        minute: 'numeric',
    });
    var parts = d.split(":");
    $('#hours').text(parts[0]);
    $('#minutes').text(parts[1]);
    $("#colon").css({
        visibility: toggle ? "visible" : "hidden"
    });
    toggle = !toggle;
};

setDate($);

$('#time').click(function (e) {
    e.preventDefault();
    var that = $(this);
    switch (that.data('switch')) {
        case 'a':
            console.log('Set Time to 24h');
            $('#time').removeClass('12hr');
            $('#time').addClass('24hr');
            var myVar24 = setInterval(setTime24, 1000);
            clearInterval(myVar12);
            that.data('switch', 'b');
            break;
        case 'b':
            console.log('Set Time to 12h');
            $('#time').removeClass('24hr');
            $('#time').addClass('12hr');
            setTime12()
            var myVar12 = setInterval(setTime12, 1000);
            clearInterval(myVar24);
            that.data('switch', 'a');
            break;
    };
});

1 Ответ

0 голосов
/ 03 февраля 2019

Попробуйте определить var myVar12, myVar24; в строке выше $('#time').click(function (e) { и удалите объявление var внутри корпуса коммутатора.

...