jquery定时器
jQuery 定时器的实现方法
在 jQuery 中，定时器功能通常通过 JavaScript 原生方法实现，但可以结合 jQuery 简化 DOM 操作。以下是常见的定时器实现方式：
使用 setTimeout 实现单次定时任务
// 延迟 2 秒后执行
setTimeout(function() {
$('#target').text('任务完成');
}, 2000);使用 setInterval 实现循环定时任务
// 每隔 1 秒执行一次
var timer = setInterval(function() {
var now = new Date();
$('#clock').text(now.toLocaleTimeString());
}, 1000);
// 停止定时器
$('#stopBtn').click(function() {
clearInterval(timer);
});使用 jQuery 的 delay() 方法（仅适用于动画队列）
// 延迟 1.5 秒后显示元素
$('#element').delay(1500).fadeIn();使用 requestAnimationFrame 实现高性能动画
function animate() {
// 动画逻辑
$('#box').css('left', pos + 'px');
if (pos < 300) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);注意事项
- 定时器函数返回的 ID 需要保存以便清除
- 避免内存泄漏，确保在不需要时清除定时器
- 在页面卸载前应清理所有定时器
requestAnimationFrame比setInterval更适合动画场景
清除定时器示例
// 清除 setTimeout
var timeoutId = setTimeout(fn, delay);
clearTimeout(timeoutId);
// 清除 setInterval
var intervalId = setInterval(fn, delay);
clearInterval(intervalId);实际应用场景
- 轮播图自动切换
- 倒计时功能实现
- 定期检查数据更新
- 延迟加载内容
- 动画序列控制
