js 实现计时器
使用 setTimeout 实现单次计时器
setTimeout(() => {
console.log('计时结束');
}, 1000); // 1000毫秒后执行使用 setInterval 实现重复计时器
let counter = 0;
const intervalId = setInterval(() => {
console.log(`已过去 ${++counter} 秒`);
if (counter >= 5) {
clearInterval(intervalId);
}
}, 1000);使用 requestAnimationFrame 实现高精度计时器
let startTime = null;
function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
console.log(`已过去 ${elapsed.toFixed(2)} 毫秒`);
if (elapsed < 5000) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);使用 Date 对象实现精确计时
const start = new Date();
setInterval(() => {
const now = new Date();
const elapsed = now - start;
console.log(`精确计时: ${elapsed} 毫秒`);
}, 100);倒计时实现
let timeLeft = 10;
const countdown = setInterval(() => {
console.log(`剩余: ${timeLeft--} 秒`);
if (timeLeft < 0) {
clearInterval(countdown);
console.log('倒计时结束');
}
}, 1000);性能优化的计时器实现
let lastTime = performance.now();
let fps = 0;
function update() {
const now = performance.now();
fps = 1000 / (now - lastTime);
lastTime = now;
console.log(`当前FPS: ${fps.toFixed(2)}`);
requestAnimationFrame(update);
}
requestAnimationFrame(update);暂停和恢复计时器
let timer;
let remaining = 5000;
let start;
function startTimer() {
start = Date.now();
timer = setTimeout(() => {
console.log('计时完成');
}, remaining);
}
function pauseTimer() {
clearTimeout(timer);
remaining -= Date.now() - start;
}
// 调用 startTimer() 开始
// 调用 pauseTimer() 暂停Web Worker 后台计时器
worker.js:
let startTime = Date.now();
setInterval(() => {
postMessage(Date.now() - startTime);
}, 1000);主线程:
const worker = new Worker('worker.js');
worker.onmessage = (e) => {
console.log(`后台计时: ${e.data} 毫秒`);
};
