javascript - 带有 performance.now() 的计时器

Question

我想实现定时器使用performance.now，因为Date.now取决于用户时钟（performance.now不）Date.now，当用户更改系统时钟时，“-way”可能会使定时器崩溃。

我想将计时器存储在localStorage. 当用户关闭选项卡或浏览器并打开它时，计时器必须恢复。

重要条件：我想考虑关闭浏览器/选项卡的时间。例如，当计时器值为 10 秒时，用户关闭浏览器。10 秒后用户打开浏览器 - 计时器值应为 20 秒。

这就是我面临的问题。

这是不使用的代码localStorage：

const timerNode = document.getElementById('timer');
const initialTimestamp = performance.now();

setInterval(() => {
  const seconds = getSeconds(initialTimestamp);
  timerNode.innerHTML = seconds;
}, 200);

function getSeconds(initialTimestamp) {
  return Math.round((performance.now() - initialTimestamp) / 1000);
}

<div id='timer'></div>

有没有办法在我上面提到的情况下存储计时器并在localStorage使用中performance.now恢复它（并观察条件）？

或者也许还有另一种获取 UNIX 时间戳的方法，它不依赖于系统时钟？

要演示 Date.now() 的问题，请运行此代码并更改系统时间，例如，将日期设置为几天前。你会看到，计时器的值是负数。

const timerNode = document.getElementById('timer');
const initialTimestamp = Date.now();

setInterval(() => {
	const seconds = getSeconds(initialTimestamp);
	timerNode.innerHTML = seconds;
}, 200);

function getSeconds(initialTimestamp) {
	return Math.round((Date.now() - initialTimestamp) / 1000);
}

<div id='timer'></div>

标签： javascript

Answer 1

是的，您将使用localStorage它在浏览器会话中持续存在。

您将用于setItem设置初始时间并getItem在新的浏览器会话中访问它。当新的浏览器会话开始时，您将检查以前的初始时间是否存在。如果有，请使用它；如果没有，请创建它。

var initialTimestamp = localStorage.getItem('initialTimestamp');

// If we previously set an initialTimestamp, convert it from string to number.
if (initialTimestamp) {
  initialTimestamp = parseInt(initialTimestamp);
}

// If we never previously set an initial timestamp, create one now.
else {
  initialTimestamp = performance.now();
  localStorage.setItem('initialTimestamp', initialTimestamp);
}