jquery 计时

jQuery 计时实现方法

jQuery 本身没有专门的计时功能，但可以通过 JavaScript 的 setTimeout 和 setInterval 方法结合 jQuery 实现计时效果。以下是几种常见的实现方式：

使用 setTimeout 实现单次延迟

$(document).ready(function() {
    setTimeout(function() {
        // 3秒后执行的代码
        $('#message').text('3秒已到！');
    }, 3000); // 3000毫秒 = 3秒
});

使用 setInterval 实现循环计时

var seconds = 0;
var timer = setInterval(function() {
    seconds++;
    $('#timer').text('已过去 ' + seconds + ' 秒');

    if(seconds >= 10) {
        clearInterval(timer); // 10秒后停止计时
    }
}, 1000); // 每1000毫秒(1秒)执行一次

实现倒计时功能

var count = 10;
var countdown = setInterval(function() {
    $('#countdown').text(count + ' 秒');
    count--;

    if(count < 0) {
        clearInterval(countdown);
        $('#countdown').text('时间到！');
    }
}, 1000);

使用 jQuery 动画实现视觉计时

$('#progress-bar').animate({
    width: '100%'
}, 5000, function() {
    // 动画完成后的回调
    alert('5秒计时完成！');
});

注意事项

• 计时器函数返回一个ID，可用于清除计时器
• 页面切换时计时器不会自动清除，可能导致内存泄漏
• 精确计时应考虑使用 Date 对象计算时间差

清除计时器示例

var timerId = setInterval(myFunction, 1000);

// 需要停止时调用
clearInterval(timerId);