Ajax呼叫未显示正确的计时器时间iPad

Question

我想在打开了相同计时器板的另一个浏览器中检测到更新时，重新加载计时器板。当检测到更新时，在我工作的笔记本电脑，手机或iMac上，它完全可以正常工作。但是当我在iPad上尝试使用它时，无法正确重新加载。

图片1This is how it looks like on the ipad after a reload

图片2This is how it looks like on the laptop, pc, phone etc with the reloads

我试图删除'`'和'$ {}'，因为也许是问题所在，但不是那样。我尝试用一​​些参数更改ajax请求，但这也不是解决方案

这是获取所有表的ajax请求（每个表都有一个单独的计时器）

$.ajax({
    url: './mod/get-tables.php',
    type: 'POST',
    cache: false,
    async: true,
    timeout: 8000,
    headers: {
        "cache-control": "no-cache"
    },
    success: function (response) {
        $("#tables-container").html(response);
    }
});

这是表div在不活动时的外观

<div class='col-lg-2 col-md-3 col-sm-4 col-4 mt-2 table-container' id='1' data-autostart='false' data-start-time='0'>
    <button class='btn btn-secondary btn-block text-center table'>
        tafel <b>1</b>
        <br>
        <span class='time'>
            <span class='hours'>00</span>:
            <span class='minutes'>00</span>:
            <span class='seconds'>00</span>
        </span>
     </button>
</div>

这是表div处于活动状态时的外观

<div class='col-lg-2 col-md-3 col-sm-4 col-4 mt-2 table-container' id='1' data-autostart='true' data-start-time='2019-11-06 09:05:16'>
    <button class='btn btn-success btn-block text-center table'>
        tafel <b>1</b>
        <br>
        <span class='time'>
            <span class='hours'>12</span>:
            <span class='minutes'>02</span>:
            <span class='seconds'>58</span>
        </span>
     </button>
</div>

以及运行计时器的代码

$(".table").on('click', function () {
    var $button = $(this);
    if ($button.hasClass('btn-secondary')) {
        $button.removeClass('btn-secondary').addClass('btn-success');
    } else if ($button.hasClass('btn-warning')) {
        $button.removeClass('btn-warning').addClass('btn-secondary');
    } else if ($button.hasClass('btn-danger')) {
        $button.removeClass('btn-danger').addClass('btn-secondary');
    } else {
        $button.removeClass('btn-success').addClass('btn-secondary');
    }
});

function prependZero(time, length) {
    time = '' + (time | 0);
    while (time.length < length) time = '0' + time;
    return time;
}

$(function () {
    $('.table-container').each(function () {
        var element = $(this);
        var table_id = this.id;
        var cooking = element.data('autostart');
        var startTime = element.data('start-time');
        var hoursElement = element.find('.hours');
        var minutesElement = element.find('.minutes');
        var secondsElement = element.find('.seconds');
        var toggleElement = element.find('.table');

        var hours = 0, minutes = 0, seconds = 0, timer;

        function setStopwatch(hours, minutes, seconds) {
            hoursElement.text(prependZero(hours, 2));
            minutesElement.text(prependZero(minutes, 2));
            secondsElement.text(prependZero(seconds, 2));
        }

        function runTimer(givenTime = Date.now()) {
            var startTime = givenTime;
            var prevHours = hours;
            var prevMinutes = minutes;
            var prevSeconds = seconds;

            timer = setInterval(function () {
                var timeElapsed = Date.now() - startTime;

                hours = (timeElapsed / 3600000) + prevHours;
                minutes = ((timeElapsed / 60000) + prevMinutes) % 60;
                seconds = ((timeElapsed / 1000) + prevSeconds) % 60;

                if (hours >= 1) {
                    toggleElement.removeClass('btn-success').removeClass('btn-warning').addClass('btn-danger');
                } else if (minutes >= 15 && minutes < 20) {
                    toggleElement.removeClass('btn-success').addClass('btn-warning');
                } else if (minutes >= 20) {
                    toggleElement.removeClass('btn-success').removeClass('btn-warning').addClass('btn-danger');
                }

                setStopwatch(hours, minutes, seconds);
            }, 1000);
        }

        function run(givenTime = 0) {
            cooking = true;
            if (givenTime !== 0) {
                runTimer(givenTime);
            } else {
                runTimer();
                startDatabase(table_id, Date.now());
            }
        }

        function pause() {
            cooking = false;
            clearTimeout(timer);
        }

        function reset() {
            cooking = false;
            pause();
            hours = minutes = seconds = 0;
            setStopwatch(hours, minutes, seconds);
            stopDatabase(table_id, Date.now());
        }

        toggleElement.on('click', function () {
            (cooking) ? reset() : run();
        });

        if (cooking) {
            let timeElapsed = new Date(startTime).getTime();
            run(timeElapsed);
        }
    });

    function stopDatabase(table_id, stop_time) {
        haveClicked = true;
        $.ajax(
            {
                url: './mod/send-table.php',
                data: {
                    stop: true,
                    table_id,
                    stop_time: formatTime(stop_time)
                },
                type: 'POST',
                cache: false,
                async: true,
                timeout: 8000,
                headers: {
                    "cache-control": "no-cache"
                }
            }
        );
    }

    function startDatabase(table_id, start_time) {
        haveClicked = true;
        $.ajax(
            {
                url: './mod/send-table.php',
                data: {
                    start: true,
                    table_id,
                    start_time: formatTime(start_time)
                },
                type: 'POST',
                cache: false,
                async: true,
                timeout: 8000,
                headers: {
                    "cache-control": "no-cache"
                }
            }
        );
    }

    function formatTime(timestamp) {
        var date = new Date(timestamp);
        // return `${date.getFullYear()}-${prependZero((date.getMonth() + 1), 2)}-${prependZero(date.getDate(), 2)} ${prependZero(date.getHours(), 2)}:${prependZero(date.getMinutes(), 2)}:${prependZero(date.getSeconds(), 2)}`;
        return date.getFullYear() + '-' + prependZero((date.getMonth() + 1), 2) + '-' + prependZero(date.getDate(), 2) + ' ' + prependZero(date.getHours(), 2) + ':' + prependZero(date.getMinutes(), 2) + ':' + prependZero(date.getSeconds(), 2);
    }
});

要做的是，当重新装入桌子（计时器板）时，时间应该在iPad上自动开始，并且不像现在一样显示00:00:00

Answer 1

我昨天晚上自己找到了解决方案这是以前的样子

if (cooking) {
    let timeElapsed = new Date("2019-11-07 10:02:15").getTime();
    run(timeElapsed);
}

但是我发现iPad（或者一般来说是IOS）不知道如何使用新的Date（[DATETIME]）处理该日期时间格式。所以我不得不用'/'来改变'-'。

所以现在看起来像这样：

if (cooking) {
    let timeElapsed = new Date("2019-11-07 10:02:15".replace(/-/g, '/')).getTime();
    run(timeElapsed);
}

这是解决方案