Ajax 调用未显示正确的计时器时间 iPad

Question

当它检测到来自另一个打开了同一个定时器板的浏览器的更新时，我想重新加载定时器板。当在我的笔记本电脑、手机或我工作的iMac上检测到更新时，它运行得非常好。但当我在iPad上试用时，它无法正确重新加载。

图片1这就是重新加载后在ipad上的样子

图片2这就是它在笔记本电脑、电脑、手机等上的样子，重新加载

我试图删除"one_answers"$｛｝"，因为这可能是问题所在，但不是。我试图用一些参数更改ajax请求，但这也不是的解决方案

这是获取所有表的ajax请求(每个表都有一个seprite计时器(

$.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(不知道如何处理新日期([datetime](的日期时间格式。所以我不得不把"-"改成"/"。

现在看起来是这样的：

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

这是的解决方案