Ajax 通话未显示正确的计时器时间 iPad

Question

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

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

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

我曾尝试删除“`”和“${}”，因为这可能是问题所在，但事实并非如此。我尝试用一些参数更改 ajax 请求，但这也不是解决方案

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

$.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);
    }
});

这是 table 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>

这是 table 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);
    }
});

需要做的是当tables（计时器板）重新加载时，时间应该自动从iPad开始，而不是显示00:00:00现在

Answer 1

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

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

但我发现 iPad（或者通常 IOS）不知道如何使用新日期 ([DATETIME]) 处理该日期时间格式。所以我不得不用“/”更改“-”。

所以现在看起来像这样：

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

这就是解决方案

Ajax 通话未显示正确的计时器时间 iPad

Ajax call doesn't show correct timer time iPad

jquery

ajax

ipad

timer

reload