jquery计时器
jQuery 计时器实现方法
使用 jQuery 实现计时器可以通过 setInterval 或 setTimeout 结合 DOM 操作完成。以下是几种常见场景的实现方式。
基础倒计时器
通过 setInterval 实现一个从指定时间开始的倒计时功能，更新显示在页面上。
var count = 10; // 初始秒数
var timer = setInterval(function() {
$('#timer').text(count); // 更新显示
count--;
if (count < 0) {
clearInterval(timer); // 停止计时器
$('#timer').text('时间到！');
}
}, 1000); // 间隔1秒动态开始/暂停计时器
通过按钮控制计时器的启动和暂停，适用于需要用户交互的场景。
var timer;
var isRunning = false;
var seconds = 0;
$('#startBtn').click(function() {
if (!isRunning) {
timer = setInterval(function() {
seconds++;
$('#display').text(seconds + '秒');
}, 1000);
isRunning = true;
}
});
$('#pauseBtn').click(function() {
clearInterval(timer);
isRunning = false;
});格式化时间显示
将秒数转换为 HH:MM:SS 格式，适用于需要友好时间展示的场景。
function formatTime(seconds) {
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor((seconds % 3600) / 60);
var secs = seconds % 60;
return [hours, minutes, secs].map(v => v.toString().padStart(2, '0')).join(':');
}
var totalSeconds = 0;
setInterval(function() {
totalSeconds++;
$('#formattedTimer').text(formatTime(totalSeconds));
}, 1000);页面停留时间统计
统计用户在页面停留的时长，离开页面时通过 beforeunload 事件上报数据。
var startTime = new Date();
$(window).on('beforeunload', function() {
var endTime = new Date();
var stayTime = (endTime - startTime) / 1000; // 转换为秒
// 发送数据到服务器（示例使用AJAX）
$.post('/track', { duration: stayTime });
});注意事项
- 使用
clearInterval及时清理不再需要的计时器，避免内存泄漏。 - 频繁操作的计时器（如毫秒级）可能因浏览器性能导致误差，需考虑使用
requestAnimationFrame。 - 移动端页面切换到后台时部分浏览器会暂停计时器，恢复时需手动校准时间。
以上方法可根据实际需求组合或调整，jQuery 主要用于简化 DOM 操作，核心计时逻辑仍依赖 JavaScript 原生定时器 API。
