jquery 定时器

jQuery 定时器实现方法

jQuery 本身没有专门的定时器函数，但可以通过 JavaScript 的原生定时器方法结合 jQuery 的选择器和操作方法来实现定时任务。

setTimeout 单次定时器

使用 setTimeout 实现单次延迟执行：

// 延迟 2 秒后执行
setTimeout(function(){
    $('#element').fadeOut(); // jQuery 操作
}, 2000);

setInterval 循环定时器

使用 setInterval 实现周期性执行：

// 每 1 秒执行一次
var interval = setInterval(function(){
    $('#counter').text(parseInt($('#counter').text()) + 1);
}, 1000);

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

jQuery delay 方法

对于动画队列可以使用 jQuery 的 delay 方法：

$('#box').delay(1000).fadeIn().delay(2000).fadeOut();

动画回调实现伪定时器

利用动画完成后的回调函数实现循环效果：

function animateLoop() {
    $('#element').fadeOut(500).fadeIn(500, animateLoop);
}
animateLoop();

requestAnimationFrame 高性能定时

对于需要高性能的动画定时，推荐使用：

function animate() {
    // 执行动画
    $('#element').css('left', pos++);

    // 循环调用
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

注意事项

• 定时器会持续运行，需要在适当时候清除
• 大量定时器可能影响性能
• 页面隐藏时（如切换标签页）部分浏览器会降低定时器频率
• 使用 clearTimeout 和 clearInterval 清除对应的定时器