jquery计时器
jQuery 计时器实现方法
使用 setInterval 实现循环计时
通过 setInterval 创建周期性执行的计时器，适合需要持续更新的场景（如倒计时、时钟）。
var timer;
var seconds = 0;
// 启动计时器
function startTimer() {
timer = setInterval(function() {
seconds++;
$("#display").text("已运行: " + seconds + "秒");
}, 1000);
}
// 停止计时器
function stopTimer() {
clearInterval(timer);
}使用 setTimeout 实现单次延迟
通过 setTimeout 实现单次延迟执行，适合一次性任务（如延迟显示提示）。
function delayedAction() {
setTimeout(function() {
alert("5秒后执行的操作");
}, 5000);
}动画计时器（animate）
利用 jQuery 的动画函数实现视觉计时效果，例如进度条。
$("#progress-bar").animate({
width: "100%"
}, {
duration: 3000,
step: function(now) {
$("#percentage").text(Math.round(now) + "%");
}
});页面加载后自动启动
通过 $(document).ready() 确保 DOM 加载完成后初始化计时器。
$(document).ready(function() {
startTimer();
});注意事项
- 清除计时器时务必使用
clearInterval或clearTimeout，避免内存泄漏。 - 长时间运行的计时器可能导致性能问题，建议优化更新频率。
- 移动端页面切换时部分浏览器会暂停计时器，需通过
visibilitychange事件处理。
扩展功能示例
实现可暂停、重置的计时器：
var timer;
var isRunning = false;
var seconds = 0;
function toggleTimer() {
if (isRunning) {
clearInterval(timer);
$("#toggleBtn").text("继续");
} else {
timer = setInterval(updateTime, 1000);
$("#toggleBtn").text("暂停");
}
isRunning = !isRunning;
}
function resetTimer() {
clearInterval(timer);
seconds = 0;
$("#display").text("0秒");
isRunning = false;
}
function updateTime() {
seconds++;
$("#display").text(seconds + "秒");
}
