当前位置：首页 > jquery

jquery 定时器

2026-04-08 03:44:13jquery

jQuery 定时器的实现方法

jQuery 本身不提供独立的定时器功能，但可以通过 JavaScript 的 setInterval 和 setTimeout 结合 jQuery 选择器来实现定时操作。以下是几种常见的实现方式：

jquery 定时器

使用 `setInterval` 实现循环定时器

// 每隔1秒执行一次
var timer = setInterval(function() {
    // 使用jQuery操作DOM
    $('#target').text(new Date().toLocaleTimeString());
}, 1000);

// 清除定时器
$('#stopBtn').click(function() {
    clearInterval(timer);
});

使用 `setTimeout` 实现单次延时

// 延时2秒后执行
var timeout = setTimeout(function() {
    $('#target').fadeOut();
}, 2000);

// 取消延时
$('#cancelBtn').click(function() {
    clearTimeout(timeout);
});

jQuery 动画队列模拟定时效果

// 利用jQuery动画队列实现间隔效果
function recursiveUpdate() {
    $('#target').fadeIn(500).fadeOut(500, recursiveUpdate);
}
recursiveUpdate();

使用 `delay()` 方法

// 链式调用配合delay实现定时效果
$('#target')
    .fadeIn(300)
    .delay(1000)
    .fadeOut(300);

ES6+ 语法改进版本

// 箭头函数简化写法
const timer = setInterval(() => {
    $('.counter').text(prev => parseInt(prev || 0) + 1);
}, 500);

// 自动停止条件
setTimeout(() => clearInterval(timer), 5000);

注意事项

定时器会持续占用内存，务必在不需要时清除
单页应用切换路由时需要手动清理定时器
使用 requestAnimationFrame 可实现更流畅的动画定时
大量定时任务建议使用时间戳计算差值而非累积延时

实际应用场景示例

// 倒计时实现
let count = 10;
const countdown = setInterval(() => {
    $('#countdown').text(count--);
    if (count < 0) {
        clearInterval(countdown);
        $('#message').show();
    }
}, 1000);

以上方法可根据具体需求选择使用，通常 setInterval 适合持续重复任务，setTimeout 适合单次延时任务，动画方法适合视觉特效场景。